html - Bootstrap : How to make navbar two layered on small screens

Question

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

这是bootply link

这在大屏幕上很好，但在小屏幕上，我想将其显示为顶部的两个栏，第一个包含左侧内容(品牌名称和搜索栏)，第二个包含右侧内容(菜单)。我可以仅使用 Bootstrap 类来做到这一点吗？

Answer 1

试试这个:

DEMO

使用隐藏类

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