javascript - 引导图标栏未显示

Question

调整浏览器大小时，Bootstrap 导航栏菜单中的图标栏未显示：

http://jsbin.com/ixAqinA/1/

   <section class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a href="/">
        brand
      </a>
    </div>
    </section>

您可以现场查看 JSBin 示例：http: //jsbin.com/ixAqinA/1/

Answer 1

你必须把它包在里面

<nav class="navbar navbar-default" role="navigation"></nav>

• 您的代码已更正：http: //jsbin.com/ixAqinA/5/
• Bootstrap 文档中的示例

Answer 2

我有一个类似的问题，但由于 Bootstrap 的变化，这个解决方案对我不起作用。

对于 Bootstrap 3.1.1，我需要以下样式来显示固定在顶部的自定义彩色导航栏上的图标栏（因此 .navbar-default 不起作用）

.navbar-toggle .icon-bar{ background-color: #fff;}

只需将#fff 更改为您想要显示的颜色。

Answer 3

Bootstrap 4 不再使用.icon-bar。在那里必须这样做：

<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
</button>

有关更多详细信息，您应该查看此处或Bootstrap 4 的文档