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：导航栏不是全宽

回答

相关问题