Bootstrap：如何在小屏幕上使导航栏分层

Question

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

以下是bootply link

这在大屏幕上很好用，但在小屏幕上，我希望在顶部显示两个条形图，第一个显示左侧内容（品牌名称和搜索栏），第二个显示正确内容（菜单）。我可以只使用bootstrap类吗？

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

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