Bootstrap 3：導航欄不是全寬

我目前正在嘗試在Bootstrap中創建寬度爲100％的導航欄，但它不像它應該那樣工作。如何將導航欄縮放到100％寬度？Bootstrap 3：導航欄不是全寬

<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

來源

2014-04-18 Timo Güntner

我認爲這段代碼看起來不錯，根據您的要求。

<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>

請參閱here

來源

2014-04-18 17:56:09

刪除.row和.col-md-12的div - 它們添加填充。您只需在分列內容時使用它們。

來源

2014-04-18 15:07:41

由於導航欄始終處於全寬範圍內，因此您不需要行和網格列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>

來源

2014-04-18 15:10:20 enriqg9

Bootstrap 3：導航欄不是全寬

回答

相關問題