Twitter Bootstrap 3 - 导航栏不水平

Question

我正在使用Bootstrap 3进行实验。我试图创建一个水平导航栏，但它并没有呈现出水平的效果。我认为导航栏应该默认是水平的，难道我需要额外的CSS样式吗？

我尝试从Bootstrap文档中复制代码来创建导航栏，例如：

<div class="row">
    <div class="col-12">            
        <div class="navbar">
          <div class="navbar-inner">
            <a class="brand" href="#">Title</a>
            <ul class="nav">
              <li class="active"><a href="#">Home</a></li>
                <li><a href="#">Link</a></li>
                  <li><a href="#">Link</a></li>
            </ul>
          </div>
        </div> 
    </div>
</div>

http://jsfiddle.net/FxkZT/

- Quantize

---

可能是在Twitter Bootstrap上水平固定导航栏的重复问题。 - PW Kad

Answer 1

演示

您的代码适用于BootStrap 2，需要进行更改。在bootstrap 3中：

1. <a class="brand" href="#">Title</a> 变为 <a class="navbar-brand" href="#">Title</a>
2. <ul class="nav"> 变为 <ul class="nav navbar-nav">
3. 不再需要 <div class="navbar-inner">

更多信息请参见此处的文档。

- edsioufi

---

你说得对，我实际上看错了文档。非常感谢！ - Quantize

Answer 2

http://jsfiddle.net/FxkZT/5/

我刚刚添加了这个小的CSS代码，看看它是否适用于你：

CSS：

@import url('http://getbootstrap.com/dist/css/bootstrap.css');

.navbar .nav > li {
    float:none;
    display:inline-block;
    *display:inline; /* Internet Explorer 7 compatibility */
    *zoom:1;
    vertical-align: top;
}

HTML：

<div class="row">
    <div class="col-12">
        <div class="navbar">
          <div class="navbar-inner">
            <a class="brand" href="#">Title</a>
            <ul class="nav">
              <li class="active"><a href="#">Home</a></li>
                <li><a href="#">Link</a></li>
                  <li><a href="#">Link</a></li>
            </ul>
          </div>
        </div>


    </div>
</div>

- user710031