使用 Bootstrap 将导航栏溢出到第二行

Question

我刚刚开始使用 Bootstrap，我是从头开始为自己设计一个页面。到目前为止，我仍然停留在导航栏上。

这是我希望它的工作方式：在桌面/平板电脑上，它应该像传统的导航栏一样工作，左侧有一个标题元素，右侧有一个选项列表。然而，在移动设备上，我不想让导航栏折叠成一个菜单，而是希望它——全部——只是移动到导航栏中的另一行。

我尝试将要溢出的部分的类设置为“侧边栏”，但列表仍然垂直呈现，就像折叠菜单一样。

我的一个朋友在他的网站“thepickletheory .com”上实现了这个（由于缺乏声誉，无法添加直接链接），它在那里运行得非常好。不过他只是用了一个 WordPress 主题，而且代码也没有在 Bootstrap 中，所以我自己也无法实现。

这里有一些图片展示了我正在努力实现的目标。

Navbar in desktop/tablet view

[名称] --- [项目 1] [项目 2]

Navbar in mobile view

[姓名]

[项目 1] [项目 2]

这是我到目前为止编写的导航栏的代码，它将导航栏的第二部分移动到另一行，但垂直呈现列表（链接现在是虚拟的）：

<div class="navbar navbar-inverse navbar-static-top">
        <div class="container">

            <div class="navbar-header">
                <a class="navbar-brand" href="#">Harshil Shah</a>
            </div>

            <div class="sidebar">
                <ul class="nav navbar-nav navbar-right">
                    <li><a href="#">About</a></li>
                    <li><a href="#">Twitter</a></li>
                    <li><a href="#">Blog</a></li>
                    <li><a href="#">Archive</a></li>
                </ul>
            </div>

        </div>
    </div>

非常感谢您能帮我解决这个问题。谢谢！

编辑 2：

通过一些相当幸运的反复试验，我偶然发现了解决方案：只需将无序列表分配给 .nav-pills 类，就可以了。

Answer 1

您必须指定navbar-collapse 此处折叠用于启用小屏幕中的切换菜单，而不是显示完整菜单，请看这里

<div class="navbar navbar-inverse navbar-static-top">
        <div class="container">

            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"     data-target="#bs-example-navbar-collapse-1">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
  <a class="navbar-brand" href="#">Harshil Shah</a>
            </div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <div class="sidebar">
                <ul class="nav navbar-nav navbar-right">
                    <li><a href="#">About</a></li>
                    <li><a href="#">Twitter</a></li>
                    <li><a href="#">Blog</a></li>
                    <li><a href="#">Archive</a></li>
                </ul>
            </div>

        </div>
    </div>
</div>

响应式导航栏需要 collapse 插件包含在您的 Bootstrap 版本中，不要介意绑定在 bootstrap.js 中。这里是source

你可以使用引导网格类source而不是折叠

<div class="navbar-header col-xs-12 col-md-4">
</div>
<div class="col-xs-12 col-md-8">
   <!-- here side bar menu -->
</div>

这将通过您正在使用的设备进行相应的绑定。根据需要设置 col 大小。