【问题标题】：Bootstrap: How to make navbar two layered on small screensBootstrap：如何在小屏幕上制作两层导航栏
【发布时间】：2014-08-27 05:37:31
【问题描述】：

我创建了一个导航栏，左侧是品牌名称和搜索框，右侧是菜单。

这里是bootply link

这在大屏幕上很好，但在小屏幕上，我想将它显示为顶部的两个栏，第一个带有左侧内容（品牌名称和搜索栏），第二个带有右侧内容（菜单）。我可以只使用引导类来做到这一点吗？

【问题讨论】：

你的意思是你想要两个这样的切换：bootply.com/jme11/3bnOBdLHve#

标签： html css twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

试试这个：

DEMO

使用hidden类

 <nav class="navbar navbar-default fixed-top" role="navigation">
            <div class="container-fluid">
                <!-- Brand and toggle get grouped for better mobile display -->
                <div class="navbar-header">

                    <a class="navbar-brand" href="#">Brand</a>

                    <div class="navbar-form navbar-left" role="search">
                        <div class="form-group">
                            <input type="text" class="form-control" placeholder="Search">
                        </div>
                        <button type="submit" class="btn btn-default">Submit</button>
                    </div>
                </div>

                <!-- Collect the nav links, forms, and other content for toggling -->
                <div class="hidden-xs hidden-sm">
                    <ul class="nav navbar-nav navbar-right">
                        <li><a href="#">Menu1</a></li>
                        <li><a href="#">Menu2</a></li>
                    </ul>
                </div>
                <!-- /.navbar-collapse -->
            </div>
            <!-- /.container-fluid -->
        </nav>

        <nav class="navbar navbar-default hidden-md hidden-lg" role="navigation">
            <div class="container-fluid">
                <div class="navbar-header">
                    <ul class="nav navbar-nav navbar-right">
                        <li><a href="#">Menu1</a></li>
                        <li><a href="#">Menu2</a></li>
                    </ul>
                </div>
            </div>
        </nav>

【讨论】：

谢谢，这正是我想要的。

【解决方案2】：

这将通过添加另一个折叠按钮来实现，看看这个demo，其他的事情将是你的工作

<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".sidebar1">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>

【讨论】：