Bootstrap圖標欄沒有顯示

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的文檔