У меня есть навигационная панель Bootstrap 3 с левыми навигационными элементами и правыми навигационными элементами (как показано ниже).
Когда рухнет, я хочу, чтобы и навигационный переключатель (AKA "меню гамбургера" ), и его элементы были выровнены влево.
Мой код:
<nav class="navbar navbar-default custom-navbar" 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>
<li><a href="#about">Left</a></li>
</ul>
<ul class="nav navbar-nav pull-right">
<li><a href="#about">Right</a></li>
<li><a href="#contact">Right</a></li>
</ul>
</div>
</nav>
В CSS, чтобы включить навигационную панель слева:
@media (max-width:767px) {
.custom-navbar .navbar-right {
float: right;
padding-right: 15px;
}
.custom-navbar .nav.navbar-nav.navbar-right li {
float: left;
}
.custom-navbar .nav.navbar-nav.navbar-right li > a {
padding:8px 5px;
}
.custom-navbar .navbar-toggle {
float: left;
margin-right: 0
}
.custom-navbar .navbar-header {
float: left;
width: auto!important;
}
.custom-navbar .navbar-collapse {
clear: both;
float: none;
}
}
Я добавил стиль "pull-right", чтобы элементы были выровнены без успеха.
"navbar-right" работает плохо. На самом деле, с ним, у меня будут и правые предметы в одной строке. Используя "pull-right", они работают как одиночные строки, но все равно остаются справа.
Это оставляет меня:
- Меню гамбургера слева (по желанию),
- Навигационные левые элементы слева (по желанию),
- Правые позиции навигатора по-прежнему справа (я хочу, чтобы это было исправлено!).
Конечный результат:
Фрагмент кода здесь.