В Bootstrap, какой наиболее удобный для платформы способ создания навигационной панели с логотипом A слева, пунктами меню в центре и логотипом B справа?
Вот то, что я пробовал до сих пор, и в итоге все выравнивается так, что логотип A находится слева, пункты меню рядом с логотипом - слева, а логотип B - справа.
<div class="navbar navbar-fixed-top navbar-custom ">
<div class="container" >
<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>
<a class="navbar-brand" href="#"><span class="navbar-logo">Logo_A</span></a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#about">Menu Item 1</a></li>
<li><a href="#contact">Menu Item 2</a></li>
<li><a href="#about">Menu Item 3</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#"><img src="images/Logo_B.png" class="img-responsive"></a></li>
</ul>
</div>
</div>
</div>
2019 Обновление
Теперь, когда в Bootstrap 4 есть flexbox, выравнивание Navbar стало намного проще. Вот обновленные примеры для слева, справа и центра в Bootstrap 4 Navbar, а также множество других сценариев выравнивания, продемонстрированных здесь.
Классы flexbox, auto-margins и ordering могут быть использованы для выравнивания содержимого 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:
тумблер слева на мобильном, бренд справа
выравнивание бренда и ссылок по центру на мобильном
выравнивание ссылок по правому краю на рабочем столе, по центру на мобильном
ссылки слева & toggler, бренд по центру, поиск справа
Смотрите также: https://stackoverflow.com/questions/41513463/bootstrap-4-align-navbar-item-to-the-right
https://stackoverflow.com/questions/51852374/bootstrap-4-navbar-right-align-with-button-that-doesnt-collapse-on-mobile
https://stackoverflow.com/questions/33867603/center-an-element-in-bootstrap-4-navbar
Вариант 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;
}
Вариант 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-justified: https://stackoverflow.com/questions/21453781/bootstrap-center-navbar/21459341#21459341
https://stackoverflow.com/questions/39945599/center-navbar-in-bootstrap/42736011#42736011
https://stackoverflow.com/questions/41513463/
Мне нужно что-то подобное (выровненные по левому, центральному и правому краю элементы), но с возможностью пометить выровненные по центру элементы как активные. Мне помогло следующее:
http://www.bootply.com/CSI2KcCoEM
<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 class="navbar-left"><a href="#">Left 1</a></li>
<li class="navbar-left"><a href="#">Left 2</a></li>
<li class="active"><a href="#">Center 1</a></li>
<li><a href="#">Center 2</a></li>
<li><a href="#">Center 3</a></li>
<li class="navbar-right"><a href="#">Right 1</a></li>
<li class="navbar-right"><a href="#">Right 2</a></li>
</ul>
</div>
</nav>
CSS:
@media (min-width: 768px) {
.navbar-nav {
width: 100%;
text-align: center;
}
.navbar-nav > li {
float: none;
display: inline-block;
}
.navbar-nav > li.navbar-right {
float: right !important;
}
}
Прихлоп 4
У нас есть много способов, чтобы выровнять navBars элементов.
класс = "по панели навигации-навигация мистер-автои"
класс = "по панели навигации-навигация мл-автои"
класс = "по панели навигации-навигация МХ-автои"
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<a routerLink="/" class="navbar-brand" href="#">Bootsrap 4</a>
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="home">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="about">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="contact">Contact us</a>
</li>
</ul>
</nav>
Navbars построены на основе! Вместо поплавков, вам необходимо адаптируемых блоков и маржа коммунальные услуги.
Для выравнивания право использовать оправдать-контент-конец
о развале
див:
<div class="collapse navbar-collapse justify-content-end">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home</a>
</li>
</ul>
</div>
Полный пример здесь: https://jsbin.com/kemawa/edit?output
Чмоки моя голова, только что перечитал свой ответ и понял, ФП задавала в течение двух Логос's один слева, один справа с меню, а не наоборот.
Это может быть осуществлено строго в формате HTML с помощью Bootstrap'ы "в панели навигации справа" и "шапку-оставили" на логотипы и потом "книжка-обосновано, что" вместо "по панели навигации-навигация" и для УЛ. Никаких дополнительных CSS, необходимые (если вы хотите поставить навигации-развал тумблер в центре в хз просмотра, то вы должны переопределить немного, но оставлю это до вас).
<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 class="navbar-brand navbar-left"><a href="#"><img src="http://placehold.it/150x30"></a></div>
</div>
<div class="navbar-brand navbar-right"><a href="#"><img src="http://placehold.it/150x30"></a></div>
<div class="navbar-collapse collapse">
<ul class="nav nav-justified">
<li><a href="#">home</a></li>
<li><a href="#about">about</a></li>
</ul>
</div>
</nav>
Bootply: http://www.bootply.com/W6uB8YfKxm
Для тех, кто попал сюда в центр в "бренд" и вот мой старый ответ:
Я знаю, что этот поток немного старый, но просто размещать мои выводы при работе над этой. Я решил основывать свои решения на Скелли'ы ответ с tomaszbak'с перерывами на collaspe. Сначала я создал мой "по панели навигации-центр" и выключен поплавок для нормальной навигации в мои CSS:
.navbar-center
{
position: absolute;
width: 100%;
left: 0;
text-align: center;
margin: auto;
}
.navbar-brand{
float:none;
}
Однако вопрос с Скелли'ы ответ если у вас есть действительно длинные фирменное наименование (или вы хотите использовать изображение для вашего бренда), то как только вы получите в СМ просмотра могут дублировать друг друга из-за абсолютной позиции и, как говорили комментаторы, когда вы доберетесь до хз просмотра тумблер пробивает (если вы не будете использовать Z позиционирование, но я действительно не'т хотим, чтобы беспокоиться об этом).
Так что я сделал было использовать бутстрап отзывчивый утилиты, чтобы создать несколько версий Марка Блока:
<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 class="navbar-brand visible-xs"><a href="#">Brand That is Really Long</a></div>
</div>
<div class="navbar-brand visible-sm text-center"><a href="#">Brand That is Really Long</a></div>
<div class="navbar-brand navbar-center hidden-xs hidden-sm"><a href="#">Brand That is Really Long</a></div>
<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>
<li><a href="#">Left</a></li>
<li><a href="#about">Left</a></li>
<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>
<li><a href="#about">Right</a></li>
<li><a href="#contact">Right</a></li>
<li><a href="#about">Right</a></li>
<li><a href="#contact">Right</a></li>
</ul>
</div>
</навигация>
Так что теперь компании LG и MD видовых экранов бренда по центру с одной слева и справа, как только вы получите в СМ просмотра ссылок падение к следующей строке, так что вы Don'т совпадают с вашим брендом, а потом ваще на хз просмотра в collaspe умирает, и вы сможете использовать тумблер. Вы можете взять это шаг вперед и изменить медиа-запросы для навигации-справа и панели навигации-слева при использовании навигации-абсолютно так, что в SM просмотра ссылок все по центру, но ничего'т иметь время, чтобы проверить его.
Вы можете проверить мой старый bootply здесь: www.bootply.com/n3PXXropP3
Я думаю, имея 3 брендов может быть столько хлопот, как в "З" но я чувствую, что в мире адаптивный дизайн это решение лучше подходит моему стилю.
Это старый вопрос, но я нашел альтернативное решение, чтобы поделиться прямо со страницы загрузки на GitHub. Документация не обновлялась и есть другие вопросы так и напрашиваются на такое же решение, хотя и немного разные вопросы. Это решение не относятся к вашему делу, но как вы видите решение это в <div с классом="Контейнер" и>
сразу после <навигация класс="по панели навигации-по умолчанию панели навигации-исправлено-топ" и>
но также может быть заменен в <div с классом="Контейнер-жидкость" и
по мере необходимости.
<!DOCTYPE html>
<html>
<head>
<title>Navbar right padding broken </title>
<script src="//code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="#/" class="navbar-brand">Hello</a>
</div>
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav navbar-right">
<li>
<div class="btn-group navbar-btn" role="group" aria-label="...">
<button type="button" class="btn btn-default" data-toggle="modal" data-target="#modalLogin">Se connecter</button>
<button type="button" class="btn btn-default" data-toggle="modal" data-target="#modalSignin">Créer un compte</button>
</div>
</li>
</ul>
</div>
</div>
</nav>
</body>
</html>
Решение было найдено на скрипке на этой странице: https://github.com/twbs/bootstrap/issues/18362
и числится как выиграл'т исправление в V3.
Я нашел следующее лучшее решение в зависимости от содержания левого, центрального и правого элементов. Ширина 100% без отступов вызывала перекрытие div'ов и мешала корректной работе тегов якорей - то есть без беспорядочного использования z-индексов.
.navbar-brand
{
position: absolute;
width: 100%;
left: 0;
margin: auto;
margin-left: 48%;
}
`в HTML <див класс="по д-флекс оправдать-содержание-СТАРТ" и>привет</див> <див класс="по д-флекс оправдать-контент-конец" и>привет</див> <див класс="по д-флекс оправдать-содержание-центр" и>привет</див> <див класс="по д-флекс оправдать-содержание-между" и>привет</див> <див класс="по д-флекс оправдать-содержание-вокруг" и>привет</див> `` Положить поля, которые вы хотите в центре, справа или слева по выше дивизии.
Самое простое решение:
Просто разделить на шапку
в Столбцах: например, если у вас есть 24 колонны по всему, 12 будут пустыми и 12 собираемся contrain панели навигации:
<nav class="navbar navbar-default">
<div class="row">
<div class="col-sm-4"></div>
<div class="col-sm-4"></div>
<div class="col-sm-4"></div>
<div class="col-sm-12">
<ul class="nav navbar-nav" align="center">
<li><a href="#">Home</a></li>
<li><a href="#">First Link</a></li>
<li><a href="#">Second Link</a></li>
<li><a href="#">Third Link</a></li>
<li><a href="#">Fourth Link</a></li>
</ul>
</div>
</div>
</nav>