Você já desejou alterar o ponto de interrupção padrão da barra de navegação do Bootstrap? Tenho certeza de que você provavelmente está aqui porque o colapso da barra de navegação está ocorrendo muito cedo (na largura de uma largura de tela) ou muito tarde (onde os links da barra de navegação começam a quebrar em larguras maiores).
<code class="language-CSS">
@media (max-width: 992px) {
.navbar-header {
float: none;
}
.navbar-left,.navbar-right {
float: none !important;
}
.navbar-toggle {
display: block;
}
.navbar-collapse {
border-top: 1px solid transparent;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
}
.navbar-fixed-top {
top: 0;
border-width: 0 0 1px;
}
.navbar-collapse.collapse {
display: none!important;
}
.navbar-nav {
float: none!important;
margin-top: 7.5px;
}
.navbar-nav>li {
float: none;
}
.navbar-nav>li>a {
padding-top: 10px;
padding-bottom: 10px;
}
.collapse.in{
display:block !important;
}
}
Aqui está uma demonstração em JSFIDDLE.
Versões mais antigas
Se você estiver usando uma versão do Bootstrap anterior à 3.1, então este é o código que você precisará para alterar o ponto de interrupção da barra de navegação: -
<code class="language-CSS">
@media (max-width: 992px) {
.navbar-header {
float: none;
}
.navbar-toggle {
display: block;
}
.navbar-collapse {
border-top: 1px solid transparent;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
}
.navbar-collapse.collapse {
display: none!important;
}
.navbar-nav {
float: none!important;
margin: 7.5px -15px;
}
.navbar-nav>li {
float: none;
}
.navbar-nav>li>a {
padding-top: 10px;
padding-bottom: 10px;
}
}
Aqui está uma demonstração em JSFIDDLE.
Bootstrap 4
O Bootstrap 4 ainda está nas versões beta e fornece classes para facilitar a alteração do ponto de interrupção da barra de navegação. Agora, o ponto de interrupção da barra de navegação do Bootstrap 4 pode ser alterado usando as classes navbar-toggleable- *. Use as classes de utilitário hidden- * para mostrar / ocultar o botão de alternância.
Por exemplo, aqui está uma barra de navegação que recolhe no ponto de interrupção da tela pequena (sm) de 768 pixels. Observe a classe navbar-toggleable-sm no DIV em colapso.
<code class="language-HTML">
<nav class="navbar navbar-dark bg-primary">
<div class="container-fluid">
<button class="navbar-toggler hidden-md-up pull-right" type="button" data-toggle="collapse" data-target="#collapsingNavbar2"> ☰ </button> <a class="navbar-brand" href="#">Navbar sm</a>
<div class="collapse navbar-toggleable-sm" id="collapsingNavbar2">
<ul class="nav navbar-nav">
<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>
<ul class="nav navbar-nav pull-xs-right">
<li class="nav-item"> <a class="nav-link" href="#">About</a> </li>
</ul>
</div>
</div>
</nav>
Aqui está uma demonstração em JSFIDDLE.