Bootstrap 3.0.0 导航垂直折叠响应

Posted 2023-03-05

【中文标题】Bootstrap 3.0.0 导航垂直折叠响应

【英文标题】：Bootstrap 3.0.0 nav vertical collapse responsive

【发布时间】：2013-09-25 04:48:59

【问题描述】：

经过多次搜索没有结果，我尝试发送一个帖子。

我正在为 bootstrap 3.0.0 (http://getbootstrap.com/components/#nav-pills) 中的导航堆叠（垂直菜单）寻找一种方法，或者在使用平板电脑或智能手机（例如导航栏）时，我的侧边栏会折叠。

如果结果是垂直响应式菜单，我同意使用其他导航堆叠的组件。

我的代码

         <div class="col-md-2">
            <div class="panel panel-default" id="sidebar" >
            <div class="panel-heading" style="background-color:#888;color:#fff;" data-target="#test">Sidebar</div> 
            <div class="panel-body" id="test">
            <ul class="nav nav-stacked nav-collapse">
                <li><a href="#">Link</a></li>
                <li><a href="#">Link</a></li>
                <li><a href="#">Link</a></li>
                <li><a href="#">Link</a></li>
                <li><a href="#">Link</a></li>
                <li><a href="#">Link</a></li>

            </ul>

              <hr>

            <div class="col col-span-12">
              <i class="icon-2x icon-facebook"></i>&nbsp;
              <i class="icon-2x icon-twitter"></i>&nbsp;
              <i class="icon-2x icon-linkedin"></i>&nbsp;
              <i class="icon-2x icon-pinterest"></i>
            </div>

            </div><!--/panel body-->
          </div><!--/panel-->
        </div><!--/end left column-->

提前感谢您的帮助:-)

【问题讨论】：

查看这篇文章：Creating a RWD Off-Canvas Layout with Bootstrap 3

【参考方案1】：

是吗？

<div class="col-md-2">
    <nav class="navbar navbar-default" role="navigation">

        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
        </div>

        <div class="collapse navbar-collapse">
            <div class="panel-heading">Sidebar22</div>
            <ul class="nav nav-stacked">
                <li class="active"><a href="#">Link</a></li>
                <li><a href="#">Link</a></li>
                <li><a href="#">Link</a></li>
                <li><a href="#">Link</a></li>              
            </ul>


        </div><!-- /.navbar-collapse -->
    </nav>

</div><!--/end left column-->

<div class="col-md-10">
</div>

签出fiddle。

【讨论】：

完美。最后一个问题是在移动设备上默认如何关闭它？

对不起，您能改写一下吗？

问题是默认情况下菜单是展开的。我应该如何在移动设备上默认包装菜单？

jsfiddle.net/s4Bb8/27 - 默认情况下，Bootstrap 会根据屏幕大小关闭它。

这里的问题是菜单标题在菜单上，而不是在导航栏标题上，如果你把它移到导航栏标题上，会弄乱菜单。