为什么导航栏不能伸展到正确的位置？

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