twitter-bootstrap – Bootstrap 3.0.0导航垂直崩溃响应

发布时间：2020-12-17 20:39:13 所属栏目：安全来源：网络整理

导读：经过多次搜索没有结果,我试着发一个帖子. 我正在寻找从bootstrap 3.0.0(http://getbootstrap.com/components/#nav-pills)导航堆叠(垂直菜单)的方法,或者当使用平板电脑或智能手机(例如导航栏)时,我的侧边栏会折叠. 如果结果是垂直响应菜单,我同意使用导航堆

经过多次搜索没有结果,我试着发一个帖子.

我正在寻找从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-->

预先感谢您的帮助：-)

解决方法

是吗？

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!