Bootstrap nav-justified stacks li

Question

Мне было интересно, что заставляет элементы li складываться друг на друга, когда я использую nav-justified.

Я читал, что есть проблема с более старыми версиями IE, но я тестирую его на новой версии Chrome.

<div id="header" class="row"> 
    <div id="backgroundImage" class="pagebg"></div> 
    <div id="nav" class="navbar navbar-default navbar-fixed-top" role="navigation">      
    <div class="navbar-header"> 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#collapse"> 
     <span class="sr-only">toggle Navigation</span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     </button> 
    </div> 
    <div id="collapse" class="collapse navbar-collapse"> 
     <ul class="nav navbar-nav nav-justified"> 
     <li><a href="#" class="active">Home</a></li> 
     <li><a href="#">News</a></li> 
     <li><a href="#">Forum</a></li> 
     <li><a href="#">Support</a></li> 
     </ul> 
    </div> 
</div> 

Это мой первый фактический сайт Bootstrap, и я знаю, что еще есть чему поучиться. В Bootstrap Doc ничего не было.

Может ли что-то переопределить его?

Я читал, что в сафари-браузерах есть ошибка при использовании nav-justified. Неплохо ли использовать nav-justified? Должен ли я использовать css для управления текстом? Или есть простое объяснение того, почему прослушивание и сложение всего вместе?

Спасибо расширенных

Answer 1

Согласно документации Justified

Легко сделать язычки или таблетки равной ширины их родителей на экранах шире 768px с .nav-оправданной. На меньших экранах укладываются ссылки nav .

Без дальнейшей настройки CSS, то nav-justified работает только для nav-pills и nav-tabs, попробуйте изменить navbar-nav для вкладок или таблетки.

см http://jsfiddle.net/x3yz13c5/5/

Если вы настаиваете, используя navbar-nav попробовать что-то вроде

.navbar-nav > li { 
    float: none; 
} 

Похожие нить можно увидеть здесь How to justify navbar-nav in Bootstrap 3

Answer 2

Удалить navbar-nav класс от <ul> элемента внутри

<div id="collapse" class="collapse navbar-collapse">...</div> 

Если он установлен, следующее правило CSS применяется к вашему <li> элементу:

@media (min-width: 768px) 
    .navbar-nav > li { 
     float: left; 
    } 
} 

float: left вызывает эффект «стека».