Navbarが右に伸びていないのはなぜですか？私はこのようなナビゲーションバーでブートストラップ・ページを持っている

Question

：あなたが見

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 

 
\t <div class="container-fluid sts-screen-fluid"> 
 
\t \t <nav role="navigation" class="navbar-nav navbar-default"> 
 
\t \t \t <div class="container"> 
 
\t \t \t \t <div class="navbar-header"> 
 
\t \t \t \t \t <button type="button" data-toggle="collapse" data-target=".navbar-collapse" class="navbar-toggle"> 
 
\t \t \t \t \t \t <span class="icon-bar"></span> 
 
\t \t \t \t \t \t <span class="icon-bar"></span> 
 
\t \t \t \t \t \t <span class="icon-bar"></span> 
 
\t \t \t \t \t </button> 
 
\t \t \t \t \t <span class="navbar-brand">Kn</span> 
 
\t \t \t \t </div> 
 
\t \t \t \t <div class="collapse navbar-collapse"> 
 
\t \t \t \t \t <ul class="nav navbar-nav navbar-right"> 
 
\t \t \t \t \t \t <li><a href=#>Log In</a></li> 
 
\t \t \t \t \t \t <li><a href=#>Sign Up</a></li> 
 
\t \t \t \t \t \t <li><a href=#>Help</a></li> 
 
\t \t \t \t \t </ul> 
 
\t \t \t \t </div> 
 
\t \t \t </div> 
 
\t \t </nav> 
 
\t </div> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

、問題は私のナビゲーションバーがそう、右へのすべての方法を伸ばすようには見えないということですそれは次のようになります。

私はナビゲーションバーが右にゲットするにはどうすればよいですか？

Answer 1

container divがcontainer-fluid divにあるためです。

Answer 2

多分container-fluidからcontainerに変更します。

Answer 3

正常に動作しているようです。here

<div class="container-fluid sts-screen-fluid"> 
    <nav role="navigation" class="navbar navbar-default"> 
     <div class="container"> 
      <div class="navbar-header"> 
       <button type="button" data-toggle="collapse" data-target=".navbar-collapse" class="navbar-toggle"> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
       </button> 
       <span class="navbar-brand">Kn</span> 
      </div> 
      <div class="collapse navbar-collapse"> 
       <ul class="nav navbar-nav navbar-right"> 
        <li><a href=#>Log In</a></li> 
        <li><a href=#>Sign Up</a></li> 
        <li><a href=#>Help</a></li> 
       </ul> 
      </div> 
     </div> 
    </nav> 
</div> 

Answer 4

あなたは<nav>タグに代わり.navbar-navの.navbarクラスを使用する必要があります。 <ul>タグには.navbar-navクラスが使用されます。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 

 
<div class="container-fluid sts-screen-fluid"> 
 
    <nav role="navigation" class="navbar navbar-default"> 
 
     <div class="container"> 
 
      <div class="navbar-header"> 
 
       <button type="button" data-toggle="collapse" data-target=".navbar-collapse" class="navbar-toggle"> 
 
        <span class="icon-bar"></span> 
 
        <span class="icon-bar"></span> 
 
        <span class="icon-bar"></span> 
 
       </button> 
 
       <span class="navbar-brand">Kn</span> 
 
      </div> 
 
      <div class="collapse navbar-collapse"> 
 
       <ul class="nav navbar-nav navbar-right"> 
 
        <li><a href=#>Log In</a></li> 
 
        <li><a href=#>Sign Up</a></li> 
 
        <li><a href=#>Help</a></li> 
 
       </ul> 
 
      </div> 
 
     </div> 
 
    </nav> 
 
</div> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

Answer 5

bootstrap's documentation (Source: w3school)によれば、.container-fluid クラスが.navbar .navbar-inverse内部でなければなりません。

 <nav class="navbar navbar-inverse"> 
     <div class="container-fluid"> 
      <div class="navbar-header"> 
      ... 
      </div> 
     </div> 
     </nav> 

Demo from Bootstrap