jquery - Bootstrap 附加侧边栏阻止文本

Question

我正在使用引导程序制作带有附加侧边栏的页面。当我将屏幕尺寸调整为手机时，侧边栏会做两件事：

1. 它会阻止其后面的文本（或文本不会在侧边栏下方移动）
2. 侧边栏右侧不显示圆角边框，而​​是一直刷新到浏览器边缘。

如何让文本移动到手机屏幕尺寸的侧边栏下方，如何让圆角边框显示？

        <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-->

Answer 1

有帮助的一件事是使well内部sidebar-nav..

       <div class="span3 affix" data-spy="affix" data-offset-top="200">
          <div class="sidebar-nav">
            <div class="well"> 
              <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>
        </div><!--/span-->

我认为您还想取出子导航span3并将整个内容放入container-fluid

这是一个演示