Question

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

以下是我希望它如何工作：在桌面/平板电脑上，它应该像传统的导航栏一样工作，左边有一个标题元素，右边有一个选项列表。但是，在移动设备上，我没有将导航栏折叠到菜单中，而是希望它 - 所有这些 - 只需移动到导航栏中的另一行。

我尝试将要填充的部分的类放到＆＃34;侧边栏＆＃34;，但列表仍然垂直渲染，就像折叠菜单一样。

我的一位朋友已经在他的网站上实施了这项工作，其中包括#pickletheory .com＆＃34; （不能为缺乏声誉添加直接链接），并且在那里工作得非常好。他只是使用了一个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尺寸。

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

1 个答案: