Navbarがブートストラップで全幅でない3

Question

ブートストラップに100％幅のナビゲーションバーを作成しようとしていますが、動作しません。

<div class="container-fluid"> 
    <nav class="navbar navbar-inverse navbar-static-top"> 
    <div class="container"> 
     <div class="navbar-header"> 
     <a class="navbar-brand" href="#"> WebsiteName </a> 
     </div> 
     <ul class="nav navbar-nav navbar-right"> 
     <li><a href="#">About</a></li> 
     <li><a href="#">Portfolio</a></li> 
     <li><a href="#">Contact</a></li> 
     </ul> 
    </div> 
    </nav> 
</div> 

Answer 1

コンテナ流体中のパディングを除去し、上書きするクラス "custom-nav-container"を作成します。

<div class="container-fluid custom-nav-container"> 
     <nav class="navbar navbar-inverse navbar-static-top"> 
      <div class="container"> 
       <div class="navbar-header"> 
        <a class="navbar-brand" href="#"> WebsiteName </a> 
       </div> 
       <ul class="nav navbar-nav navbar-right"> 
        <li><a href="#">About</a></li> 
        <li><a href="#">Portfolio</a></li> 
        <li><a href="#">Contact</a></li> 
       </ul> 
      </div> 
     </nav> 
    </div> 

.custom-nav-container{ 
padding-left: 0px !important; 
padding-right: 0px !important; 
} 

Answer 2

あなたのタグの中に

<div class="container-fluid"> 

へ

<div class="container-"> 

を交換してください。あなたの問題は解決しました。ありがとうございました。

Answer 3

。容器には、ブートストラップ（xs、sm、md、lg）の各画面サイズごとに1つの固定幅があります。これは反応的です。ただし、画面サイズに基づいて固定されています。 。容器 - 流体は、利用可能な幅を埋めるように展開されます。コンテナ流体を使用してブラウザのサイズを変更すると、その内部のコンテンツがすべてのピクセルで調整され、利用可能な幅全体が使用されることがあります。

<div class="container"> 
    <nav class="navbar navbar-inverse navbar-static-top"> 
     <div class="container"> 
      <div class="navbar-header"> 
       <a class="navbar-brand" href="#"> WebsiteName </a> 
      </div> 
      <ul class="nav navbar-nav navbar-right"> 
       <li><a href="#">About</a></li> 
       <li><a href="#">Portfolio</a></li> 
       <li><a href="#">Contact</a></li> 
      </ul> 
     </div> 
    </nav> 
</div>