Twitter Bootstrap 3 - панель навигации не горизонтальна

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

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

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


twitter-bootstrap twitter-bootstrap-3
person Quantize    schedule 12.08.2013    source источник
comment
возможный дубликат Горизонтальная фиксированная панель навигации в загрузчике Twitter   -  person PW Kad    schedule 12.08.2013

Ответы (2)


arrow_upward
20
arrow_downward

ДЕМО

Ваш код предназначен для 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">

Дополнительная информация в документе здесь.

person edsioufi    schedule 12.08.2013
comment
Вы правы, на самом деле я смотрел не ту документацию. Огромное спасибо! - person Quantize; 12.08.2013

arrow_upward
2
arrow_downward

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>
person Community    schedule 12.08.2013