html - Bootstrap:如何使导航栏在小屏幕上分为两层

我创建了一个导航栏，左边是品牌名称和搜索框，右边是菜单。
这里是bootply link
这在大屏幕上很好，但是在小屏幕上，我想在上面显示为两个栏，第一个是左边的内容（品牌名称和搜索栏），第二个是右边的内容（菜单）。我可以只用引导类来做吗？

最佳答案

试试这个：
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>

关于html - Bootstrap:如何使导航栏在小屏幕上分为两层，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/25519634/