twitter-bootstrap - Twitter Bootstrap 导航栏未按预期显示

Question

我正在使用 twitter 引导程序并定义了一个导航栏

<div class="navbar navbar-fixed-top">  
    <div class="navbar-inner">  
        <div class="container">  
            <ul class="nav">  
                <li class="active">  
                     <a class="brand" href="#">w3resource</a>  
                </li>  
               <li>
                   <a href="#">About</a>
               </li>  
              <li>
                 <a href="#">Portfolio</a>
              </li>  
              <li>
                  <a href="#">Contact</a>
              </li>  
          </ul> 
       </div>  
   </div>  
</div> 

我包括了引导 css 文件、jquery 和引导 js 文件。导航栏显示如下图所示。

这很奇怪，因为页面上的其他元素似乎使用引导程序的样式很好，看看下面的图片

任何想法为什么会发生这种情况？

Answer 1

您需要将容器类更改为容器流体：

<div class="container-fluid">
    <div class="row-fluid">
        <div class="navbar navbar-fixed-top">
            <div class="navbar-inner">
                <div class="container-fluid">
                    <ul class="nav">
                        <li class="active"> <a class="brand" href="#">w3resource</a> 
                        </li>
                        <li> <a href="#">About</a>

                        </li>
                        <li> <a href="#">Portfolio</a>

                        </li>
                        <li> <a href="#">Contact</a>

                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>

这是小提琴：http: //jsfiddle.net/CrNPK/1/

Answer 2

好的，所以我终于让导航栏按预期显示，这就是我所做的。

• 我卸载了 twitter bootstrap 并使用 NuGet 重新安装，以确保我拥有最新版本（版本 3.0.0）。
• 为引导版本 2.0.0 和 3.0.0 创建导航栏的语法不同。看看这篇解释差异的帖子。

安装最新版本并更新语法后，一切都按预期工作。