Question

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

它会阻止它后面的文本（或文本不会在侧边栏下移动）
侧边栏的右侧不会显示带圆角的边框，而是会一直闪烁到浏览器的边缘。

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

        <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

Bootstrap贴有侧边栏阻止文字

1 个答案:

Here is a Demo