Bootstrap 3：導航欄不是全寬

Question

我目前正在嘗試在 Bootstrap 中創建一個寬度為 100% 的導航欄，但它無法正常工作。 如何將導航欄縮放到 100% 寬度？

<div class="container-fluid" style="border: 1px solid">  
      <!-- Navbar -->
      <div class="row">
          <div class="col-md-12">
            <nav class="navbar navbar-default" role="navigation">
              <div class="container-fluid">
                <div class="navbar-header">
                  <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-2">
                    <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="#">Bootflat</a>
                </div>
              </div>
            </nav>
          </div>
        </div>
    </div>

圖片： http : //i.imgur.com/diqTvTP.png

Answer 1

刪除.row和.col-md-12 .row它們添加了填充。 只有在按列划分內容時才需要使用它們。

Answer 2

您不需要行和網格 col div，因為導航欄將始終處於全寬並且您正在使用.container-fluid 。 嘗試這個：

<nav class="navbar navbar-default" role="navigation">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-2">
        <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="#">Bootflat</a>
    </div>
  </div>
 </nav>

Answer 3

我認為根據您的要求，此代碼看起來不錯。

<div style="border: 1px solid">  
  <nav class="navbar navbar-default" role="navigation">
    <div>
      <div class="navbar-header">
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-2">
      <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="#">Bootflat</a>
      </div>
    </div>
  </nav>
</div>

請看這里

Answer 4

就像我一樣，如果你想要頂部的全寬（粘性）。 將fixed-top類添加到nav就可以了。

<nav class="navbar fixed-top navbar-light bg-light">
  <a class="navbar-brand" href="#">Fixed top</a>
</nav>

Answer 5

只需添加以下 css 代碼body{padding:0;margin:0} 。 它對我有用。

希望這可以幫助。