Это вопрос OLD для Bootstrap 3 → изменение точки краха для навигационной панели, но предложенные здесь методологии:
https://coderwall.com/p/wpjw4w/change-the-bootstrap-navbar-breakpoint
и здесь:
Bootstrap 3 Свернуть Navbar Свернуть
не работают для свертывания ниже 768px, он, похоже, работает только для расширения точки коллапса, а не втягивания. У меня есть особая ситуация, когда у моего навигатора есть 3 кнопки, поэтому он не должен так быстро рушиться. Я бы хотел, чтобы он рухнул на 420 пикселей вместо этого.
Есть ли для этого решение CSS? Если нет, может ли кто-нибудь указать мне на правильный атрибут на странице настройки бутстрапа, которую мне нужно изменить и загрузить? Возможно, это общие точки останова? Поскольку я ничего не вижу, что говорит о контрольных точках Navbar:
http://getbootstrap.com/customize/
В соответствии с запросом мой HTML-код для навигатора просто:
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<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 class="navbar-collapse collapse" id = "navbar">
<ul class="nav navbar-nav navbar-left">
<li class = "navbar_buttons"><a id = "new_route_button"><strong>New Route</strong></a></li>
<li class="divider-vertical"></li>
<li class = "navbar_buttons"><a id = "clear_route_button">Clear Route</a></li>
</ul>
<ul class="nav navbar-nav navbar-right"> <!--Right justified navbar list-->
<li class = "navbar_buttons"><a id = "about_button">About</a></li>
</ul>
</div>
</div> <!-- Container -->
</nav> <!-- End of Navbar Container -->
Затем у меня есть CSS, чтобы добавить вертикальное деление:
/*Preventing vertical dividers from appearing collapsed*/
@media (max-width: 420px) {
.navbar-collapse .nav > .divider-vertical {
display: none;
}
}
/*Defining the vertical dividers*/
.navbar .divider-vertical {
height: 50px;
margin: 0 9px;
border-right: 1px solid #ffffff;
border-left: 1px solid #DADADA;
}
.navbar-inverse .divider-vertical {
border-right-color: #222222;
border-left-color: #111111;
}