Currently, I am utilizing bootstrap to create a webpage featuring an affixed sidebar. However, I have encountered two issues when adjusting the screen size to that of a phone:
- The sidebar obstructs the text behind it, halting its movement beneath the sidebar.
- On the right side of the sidebar, the rounded border corner does not display; instead, it extends all the way to the browser's edge.
How can I ensure that the text moves below the sidebar on smaller phone screens and how can I rectify the absence of the rounded corner border?
<div class="row-fluid" style="margin-top:20px;">
<div id="sub-nav" class="span3">
<div class="span3 affix" data-spy="affix" data-offset-top="200">
<div class="well sidebar-nav">
<ul class="nav nav-list">
<li class="nav-header">Test Sidebar</li>
<li><a href="#a">a</a></li>
<li><a href="#b">b</a></li>
<li><a href="#c">c</a></li>
<li><a href="#d">d</a></li>
</ul>
</div><!--/.well -->
</div><!--/span-->
</div>
<div class="span9">
<div class="page-header">
<h1>Test <small>test</small></h1>
<em>asdf</em>
</div>
<div id="content">
<section id="a">
<h4>a</h4>
<div style="margin-bottom:500px;"></div>
</section>
<section id="b">
<h4 >b</h4>
<div style="margin-bottom:500px;"></div>
</section>
<section id="c">
<h4 >c</h4>
<div style="margin-bottom:500px;"></div>
</section>
<section id="d">
<h4 >d</h4>
<div style="margin-bottom:500px;"></div>
</section>
</div>
</div><!--/span-->
</div><!--/row-->