Twitter Bootstrap 3 - Navbar не является горизонтальным

Question

Я нахожусь fiddlin'ом с бутстрапом 3. Я пытаюсь сделать горизонтальную навигацию, за исключением того, что она не получается горизонтальной. Я думал, что навигатор должен быть горизонтальным из коробки, возможно, мне понадобится дополнительный css?

Я попытался сделать NavBar копирования кода из начальной загрузки документации, как это:

<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/

Answer 1

DEMO

Ваш код для Bootstrap 2 и должен быть изменен. В загрузчике 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">

Больше информации в документ here.

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>