Como alterar o ponto de interrupção do Bootstrap Navbar

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.

WordPress / Web Development Tutorials
(Best WordPress Tutorials)