Bootstrap 3 – desativa o colapso da barra de navegação

Esta é minha navbar simples:

 

Eu só gostaria de evitar que isso colapsasse, porque eu não preciso disso, como fazer?

Eu gostaria de evitar escrever 300 mil linhas de CSS para replace os estilos padrão.

Alguma sugestão?

Depois de examinar de perto, não 300k linhas, mas existem cerca de 3-4 propriedades CSS que você precisa replace:

 .navbar-collapse.collapse { display: block!important; } .navbar-nav>li, .navbar-nav { float: left !important; } .navbar-nav.navbar-right:last-child { margin-right: -15px !important; } .navbar-right { float: right!important; } 

E com isso seu cardápio não entrará em colapso.

DEMO ( jsfiddle )

EXPLICAÇÃO

As quatro propriedades CSS fazem o respectivo:

  1. A propriedade .collapse padrão no bootstrap oculta o lado direito do menu para tablets (paisagem) e telefones e, em vez disso, um botão de alternância é exibido para ocultá-lo / exibi-lo. Portanto, essa propriedade substitui o padrão e mostra persistentemente esses elementos.

  2. Para o menu do lado direito aparecer na mesma linha junto com o lado esquerdo, precisamos que o lado esquerdo esteja flutuando para a esquerda.

  3. Esta propriedade está presente por padrão no bootstrap, mas não no tablet (retrato) para a resolução do telefone. Você pode pular este, é provável que não afete sua barra de navegação geral.

  4. Isso mantém o menu do lado direito à direita, enquanto os elementos internos ( li ) seguirão a propriedade 2. Assim, temos o lado esquerdo flutuando para a esquerda e o lado direito flutuando para a direita, o que os coloca em uma linha.

O nabvar entrará em colapso em pequenos dispositivos. O ponto de colapso é definido por @grid-float-breakpoint em variables. Por padrão, isso será antes de 768px . Para canvass abaixo da largura de canvas de 768 pixels, a barra de navegação será semelhante a:

insira a descrição da imagem aqui

É possível alterar o @grid-float-breakpoint em variables.less e recompilar o Bootstrap. Ao fazer isso, você também terá que alterar @screen-xs-max em navbar.less. Você terá que definir este valor para o seu novo @grid-float-breakpoint -1 . Veja também: https://github.com/twbs/bootstrap/pull/10465 . Isso é necessário para alterar os formulários da barra de navegação e suspensos no @ grid-float-breakpoint para sua versão móvel também.

A maneira mais fácil é personalizar o bootstrap

encontrar variável:

  @grid-float-breakpoint 

que é definido como @screen-sm , você pode alterá-lo de acordo com suas necessidades. Espero que ajude!


Para usuários do SAAS

adicione suas variables ​​personalizadas como $grid-float-breakpoint: 0px; antes do @import "bootstrap.scss";

Aqui está uma abordagem que deixa inalterado o comportamento de recolhimento padrão, permitindo que uma nova seção de navegação permaneça sempre visível. É um aumento de navbar ; navbar-header-menu é uma class CSS que criei e não faz parte do Bootstrap propriamente dito.

Coloque isso no elemento de navbar-header navbar-brand após navbar-brand :

  

Adicione este CSS:

 .navbar-header-menu { float: left; } .navbar-header-menu > .navbar-nav { float: left; margin: 0; } .navbar-header-menu > .navbar-nav > li { float: left; } .navbar-header-menu > .navbar-nav > li > a { padding-top: 15px; padding-bottom: 15px; } .navbar-header-menu > .navbar-nav .open .dropdown-menu { position: absolute; float: left; width: auto; margin-top: 0; background-color: #fff; border: 1px solid #ccc; border: 1px solid rgba(0,0,0,.15); -webkit-box-shadow: 0 6px 12px rgba(0,0,0,.175); box-shadow: 0 6px 12px rgba(0,0,0,.175); } .navbar-header-menu > .navbar-form { float: left; width: auto; padding-top: 0; padding-bottom: 0; margin-right: 0; margin-left: 0; border: 0; -webkit-box-shadow: none; box-shadow: none; } .navbar-header-menu > .navbar-form > .form-group { display: inline-block; margin-bottom: 0; vertical-align: middle; } .navbar-header-menu > .navbar-left { float: left; } .navbar-header-menu > .navbar-right { float: right !important; } .navbar-header-menu > *.navbar-right:last-child { margin-right: -15px !important; } 

Verifique o violino: http://jsfiddle.net/L2txunqo/

Aviso: navbar-right pode ser usado para classificar os elementos visualmente, mas não é garantido que o elemento seja puxado para a parte mais à direita da canvas. O violino demonstra esse comportamento com a navbar-form .

Se você não estiver usando a versão menor, aqui está a linha que você precisa alterar:

 @media (max-width: 767px) { /* Change this to 0 */ .navbar-nav .open .dropdown-menu { position: static; float: none; width: auto; margin-top: 0; background-color: transparent; border: 0; box-shadow: none; } .navbar-nav .open .dropdown-menu > li > a, .navbar-nav .open .dropdown-menu .dropdown-header { padding: 5px 15px 5px 25px; } .navbar-nav .open .dropdown-menu > li > a { line-height: 20px; } .navbar-nav .open .dropdown-menu > li > a:hover, .navbar-nav .open .dropdown-menu > li > a:focus { background-image: none; } } 

A solução a seguir funcionou para mim no Bootstrap 3.3.4:

CSS:

 /*no collapse*/ .navbar-collapse.collapse.off { display: block!important; } .navbar-collapse.collapse.off ul { margin: 0; padding: 0; } .navbar-nav.no-collapse>li, .navbar-nav.no-collapse { float: left !important; } .navbar-right.no-collapse { float: right!important; } 

em seguida, adicione a class .no-collapse a cada uma das listas e a class .off ao contêiner principal. Aqui está um exemplo escrito em jade:

 nav.navbar.navbar-default.navbar-fixed-top .container-fluid .collapse.navbar-collapse.off ul.nav.navbar-nav.no-collapse li a(href='#' class='glyph') i(class='glyphicon glyphicon-info-sign') ul.nav.navbar-nav.navbar-right.no-collapse li.dropdown a.dropdown-toggle(href='#', data-toggle='dropdown' role='button' aria-expanded='false') | Tools span.caret ul.dropdown-menu(role='menu') li a(href='#') Tool #1 li a(href='#') | Logout 

Outra maneira é simplesmente remover o collapse navbar-collapse da marcação. Exemplo com o Bootstrap 3.3.7