爲什麼導航欄不能伸展到正確的位置？

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-fluid div中有container 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

你必須使用.navbar類，而不是.navbar-nav在<nav>標籤。 .navbar-nav類用於<ul>標記。

<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