Я пытаюсь оправдать navbar
(сделать растяжку содержимого навигатора) в Bootstrap 3. Я добавил margin: 0 auto; max-width: 1000px;
в классы nav*
, а также попытался добавить элемент container
в качестве родителя в ul
. В качестве последней проверки я сделал то, что было предложено в этом ответе, добавив navbar-justified
в класс navbar
, но это привело к тому, что все сработало слева без оправдывая всю навигационную панель.
Выполнение nav nav-justified
ul
делает центр ul
, но не сохраняет стили класса navbar-nav
, поскольку он не является частью ul
, и он не выглядит великолепно когда экран меньше 768 пикселей.
Как оправдать Bootstrap 3 navbar
?
Изменить: для тех, кто интересуется более полным ответом, вот какой код я использую в производстве:
// Stylesheet
.navbar-nav>li {
float: none;
}
// Navbar
<nav class="navbar navbar-default">
<ul class="nav nav-justified navbar-nav">
<li><a href="/">Home</a></li>
<li><a href="group.html">Group</a></li>
<li><a href="services.html">Services</a></li>
<li><a href="positions.html">Positions</a></li>
</ul>
</nav>
И вот рабочий jsFiddle. Возможно, вам придется растянуть размер окна result
, чтобы он отображался правильно. Если вы заинтересованы в центрировании фактического списка без растягивания до полной ширины, см. David Taiaroa jsFiddle.