2019 Обновление
Bootstrap 4
Теперь, когда Bootstrap 4 имеет flexbox, выравнивание Navbar стало намного проще. Вот обновленные примеры для левой , правой и центральной частей в Bootstrap 4 Navbar , и многие другие сценарии выравнивания, продемонстрированные здесь .
Flexbox , авто-поля , и упорядочение служебные классы могут быть использованы для выравнивания содержимого NavBar по мере необходимости. Есть много вещей, которые следует учитывать, включая порядок и выравнивание элементов Navbar (бренд, ссылки, переключатели) как на больших экранах, так и на мобильных / свернутых видах. Не используйте классы сетки (row, col) для Navbar .
Вот различные примеры ...
Левая, центральная (торговая марка) и правая ссылки:
<nav class="navbar navbar-expand-md navbar-dark bg-dark">
<div class="navbar-collapse collapse w-100 order-1 order-md-0 dual-collapse2">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Left</a>
</li>
<li class="nav-item">
<a class="nav-link" href="//codeply.com">Codeply</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
</ul>
</div>
<div class="mx-auto order-0">
<a class="navbar-brand mx-auto" href="#">Navbar 2</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".dual-collapse2">
<span class="navbar-toggler-icon"></span>
</button>
</div>
<div class="navbar-collapse collapse w-100 order-3 dual-collapse2">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#">Right</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
</ul>
</div>
</nav>
http://www.codeply.com/go/qhaBrcWp3v
Еще один вариант BS4 Navbar с центральными ссылками и наложенным логотипом :
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="navbar-collapse collapse w-100 dual-collapse2 order-1 order-md-0">
<ul class="navbar-nav ml-auto text-center">
<li class="nav-item active">
<a class="nav-link" href="#">Link</a>
</li>
</ul>
</div>
<div class="mx-auto my-2 order-0 order-md-1 position-relative">
<a class="mx-auto" href="#">
<img src="//placehold.it/120/ccff00" class="rounded-circle">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".dual-collapse2">
<span class="navbar-toggler-icon"></span>
</button>
</div>
<div class="navbar-collapse collapse w-100 dual-collapse2 order-2 order-md-2">
<ul class="navbar-nav mr-auto text-center">
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
</ul>
</div>
</nav>
Или эти другие сценарии выравнивания Bootstrap 4:
бренд слева, ссылки в мертвой точке, (пусто справа)
Марка и центр ссылок, значки слева и справа
Еще примеры Bootstrap 4 :
переключение влево на мобильном устройстве, бренд в правом
центре и ссылки на мобильном устройстве в
правой части выравнивают ссылки на рабочем столе, в центре ссылки на мобильных
ссылках влево и в переключателе, в центре бренда, в поиске справа
См. Также: Bootstrap 4 выравнивает элементы панели навигации по правому
краю. Bootstrap 4 выравнивает по правому краю панель навигации с кнопкой, которая не сворачивается на мобильном
устройстве.
Bootstrap 3
Вариант 1 - Центр марки, с левыми / правыми навигационными ссылками:
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<a class="navbar-brand" href="#">Brand</a>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-left">
<li><a href="#">Left</a></li>
<li><a href="#about">Left</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#about">Right</a></li>
<li><a href="#contact">Right</a></li>
</ul>
</div>
</nav>
.navbar-brand
{
position: absolute;
width: 100%;
left: 0;
text-align: center;
margin:0 auto;
}
.navbar-toggle {
z-index:3;
}
http://bootply.com/98314 (3.x)
Вариант 2 - Левая, центральная и правая навигационные ссылки:
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a href="#">Left</a></li>
</ul>
<ul class="nav navbar-nav navbar-center">
<li><a href="#">Center</a></li>
<li><a href="#">Center</a></li>
<li><a href="#">Center</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Right</a></li>
</ul>
</div>
</nav>
@media (min-width: 768px) {
.navbar-nav.navbar-center {
position: absolute;
left: 50%;
transform: translatex(-50%);
}
}
http://www.bootply.com/SGYC6BWeBK
Вариант 3 - центрируйте как бренд, так и ссылки
.navbar .navbar-header,
.navbar-collapse {
float:none;
display:inline-block;
vertical-align: top;
}
@media (max-width: 768px) {
.navbar-collapse {
display: block;
}
}
http://www.codeply.com/go/1lrdvNH9GI
Больше примеров:
Левый бренд, центральные ссылки
Левый переключатель, центральный бренд
Для 3.x также см. Nav- jusified : Bootstrap center navbar
Центр Navbar в Bootstrap
Bootstrap 4 выравнивает элементы панели навигации вправо
.absкласса приводит к тому, чтоnavbar-brandэлемент закрывает кнопки слева и справа, что делает их недоступными для кликаBootstrap 4
У нас есть много способов выровнять элементы navBars.
Для выравнивания по левому краю
Для правого выравнивания
Для выравнивания по центру
источник
Мне нужно что-то похожее (левый, центральный и правый выравниваемые элементы), но с возможностью пометить центрированные элементы как активные. Что сработало для меня:
http://www.bootply.com/CSI2KcCoEM
CSS:
источник
Bootstrap 4 (по состоянию на альфа 6)
Для Align Right используйте
justify-content-endнаcollapsediv:Полный пример здесь: https://jsbin.com/kemawa/edit?output
источник
Чмокнул головой, просто перечитал мой ответ и понял, что ОП просит два логотипа - один слева, справа - с центральным меню, а не наоборот.
Это можно сделать строго в HTML, используя Bootstrap «navbar-right» и «navbar-left» для логотипов, а затем «nav-juscted» вместо «navbar-nav» для вашего UL. Дополнительный CSS не требуется (если вы не хотите поместить переключатель navbar-collapse в центре в окне просмотра xs, вам нужно немного переопределить, но оставьте это на ваше усмотрение).
Bootply: http://www.bootply.com/W6uB8YfKxm
Для тех, кто попал сюда, пытаясь центрировать «бренд», вот мой старый ответ:
Я знаю, что эта ветка немного старая, но просто чтобы опубликовать свои выводы, работая над этим. Я решил основывать свое решение на ответе Скелли с тех пор, как Томашбак сломал колласпе. Сначала я создал свой «navbar-center» и отключил float для обычного navbar в моем CSS:
Однако проблема с ответом skelly заключается в том, что если у вас действительно длинное фирменное наименование (или вы хотите использовать изображение для своего бренда), то, как только вы попадете в область просмотра sm, это может привести к перекрытию из-за абсолютной позиции и, как это делают комментаторы. сказал, как только вы доберетесь до окна просмотра xs, тумблер сработает (если вы не используете Z-позиционирование, но я действительно не хочу беспокоиться об этом).
Поэтому я использовал утилиты, отвечающие за загрузку, для создания нескольких версий фирменного блока:
Так что теперь во вьюпортах lg и md бренд центрируется ссылками слева и справа, когда вы попадаете в видовой экран sm, ваши ссылки переходят на следующую строку, чтобы не перекрываться с вашим брендом, а затем, наконец, на xs. в окне просмотра появляется Collaspe, и вы можете использовать переключатель. Вы можете сделать это еще дальше и изменить медиазапросы для navbar-right и navbar-left при использовании с navbar-brand, чтобы в окне просмотра sm все ссылки были отцентрированы, но у них не было времени проверить это.
Вы можете проверить мой старый bootply здесь: www.bootply.com/n3PXXropP3
Полагаю, что иметь 3 бренда может быть не меньше, чем «z», но я чувствую, что в мире адаптивного дизайна это решение лучше подходит моему стилю.
источник
Вы устанавливаете поле слева на auto -> ml-auto на участке, который хотите переместить вправо.
источник
Я обнаружил, что следующее было лучшим решением в зависимости от содержания левого, центрального и правого элементов. Ширина в 100% без полей приводила к наложению div и мешала правильной работе тегов привязки, то есть без грязного использования z-индексов.
источник
Это устаревший вопрос, но я нашел альтернативное решение, чтобы поделиться им со страницы начальной загрузки github. Документация не была обновлена, и есть другие вопросы, касающиеся SO, которые задают одно и то же решение, хотя и по несколько другим вопросам. Это решение не относится к вашему случаю, но, как вы можете видеть, решение подходит
<div class="container">сразу после этого,<nav class="navbar navbar-default navbar-fixed-top">но его также можно заменить<div class="container-fluid"на необходимое.Решение было найдено на скрипке на этой странице: https://github.com/twbs/bootstrap/issues/18362
и указан как не исправить в V3.
источник
Поместите поля, которые вы хотите центрировать, вправо или влево в соответствии с приведенным выше делением.
источник
Самое простое решение:
Просто разделите их
navbarна столбцы: например, если у вас всего 24 столбца, 12 будут пустыми, а 12 будут противоречить навигационной панели:источник