全導航輔助導航欄內的父導航欄與引導

Question

我試圖用Bootstrap創建一個非常簡單的雙導航欄效果。我現在唯一的問題是，第二個/底部的導航欄不能在整個瀏覽器寬度上延伸。這裏是我的代碼...

<nav class="navbar navbar-fixed-top navbar-inverse"> 
     <div class="container"> 
     <div class="navbar-header"> 
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar" style = "line-height: 30px;"> 
      <span class="sr-only">Toggle navigation</span> 
      <span class="glyphicon glyphicon-menu-hamburger" style="color:#fff;"></span> 
      </button> 
     <a class="navbar-brand" href="#" style = "line-height: 30px;">brand</a> 

     </div> 
     <div id="navbar" class="collapse navbar-collapse"> 
      <ul class="nav navbar-nav"> 
      <!-- <li><a href="#contact">Button</a></li> --> 
      </ul> 
     </div><!-- /.nav-collapse --> 

     <!-- this is the second navbar element that never takes up the full width available--> 
     <div class="nav navbar-default" style="background-color: #66CCFF;"> 
       <ul class="nav navbar-nav"> 
        <li><a href="#" class="glyphicon glyphicon-search"></a></li> 
        <li class="divider-vertical"></li> 
        <li><a href="#" class="glyphicon glyphicon-cloud"></a></li> 
        <li class="divider-vertical"></li> 
        <li><a href="#" class="glyphicon glyphicon-th"></a></li> 
       </ul> 
      </div> 
     </div><!-- /.container --> 
    </nav><!-- /.navbar --> 

我曾與各種不同類型的導航欄和CSS樣式播放（例如寬度：100％），但我似乎無法弄清楚如何使第二導航欄（即包含3個glyphicons的那個）與它的父級寬度相同。

真的很感謝任何想法，我可能做錯了！

Answer 1

您需要使用container-fluid而不是container，因爲後者具有固定的寬度。

.container-fluid仍然包含用於填充的CSS規則。您可以嘗試使用自定義類來覆蓋它。

.container-fluid.no-padding { 
 
    padding: 0; 
 
} 
 
.no-padding .navbar-header { 
 
    padding-left: 10px; /* Align the Brand text */ 
 
} 
 
@media (max-width: 768px) { 
 
    .no-padding .navbar-nav { 
 
    padding-left: 10px; /* Align the icons on small screens */ 
 
    } 
 
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet" /> 
 
<nav class="navbar navbar-fixed-top navbar-inverse"> 
 
    <div class="container-fluid no-padding"> 
 
    <div class="navbar-header"> 
 
     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar" style="line-height: 30px;"> 
 
     <span class="sr-only">Toggle navigation</span> 
 
     <span class="glyphicon glyphicon-menu-hamburger" style="color:#fff;"></span> 
 
     </button> 
 
     <a class="navbar-brand" href="#" style="line-height: 30px;">brand</a> 
 

 
    </div> 
 
    <div id="navbar" class="collapse navbar-collapse"> 
 
     <ul class="nav navbar-nav"> 
 
     <!-- <li><a href="#contact">Button</a></li> --> 
 
     </ul> 
 
    </div> 
 
    <!-- /.nav-collapse --> 
 

 
    <!-- this is the second navbar element that never takes up the full width available--> 
 
    <div class="nav navbar-default" style="background-color: #66CCFF;"> 
 
     <ul class="nav navbar-nav"> 
 
     <li> 
 
      <a href="#" class="glyphicon glyphicon-search"></a> 
 
     </li> 
 
     <li class="divider-vertical"></li> 
 
     <li> 
 
      <a href="#" class="glyphicon glyphicon-cloud"></a> 
 
     </li> 
 
     <li class="divider-vertical"></li> 
 
     <li> 
 
      <a href="#" class="glyphicon glyphicon-th"></a> 
 
     </li> 
 
     </ul> 
 
    </div> 
 
    </div> 
 
    <!-- /.container --> 
 
</nav> 
 
<!-- /.navbar -->

Answer 2

.navbar > .container { 
    padding-left: 0; 
    padding-right: 0; 
} 

只是去除容器中的填充改變你的頁面上的容器的所有實例。

你再要回添加填充到您的導航欄頭

.navbar > .container { 
    padding-left: 0; 
    padding-right: 0; 
} 

.navbar .navbar-header { 
    padding: 5px 10px; 
}