Bootstrap 3 - desativar recolhimento da barra de navegação

88

Esta é minha barra de navegação simples:

<div class="navbar navbar-fixed-top myfont" role="navigation">
    <div class="">
        <ul class="nav navbar-nav navbar-left">
            <li>
                <a class="navbar-brand" href="#">
                    <img src="assets/img/logo.png"/>
                </a>
            </li>
            <li>
                <button class="btn btn-navbar">
                    <i class="fa fa-edit"></i>
                    Create 
                </button>
            </li>
        </ul>
    </div>
    <ul class="nav navbar-nav navbar-right">
        <li data-match-route="/"><a href="#/page-one">Login</a></li>
        <li data-match-route="/"><a href="#/page-two/sub-a">Signup</a></li>
    </ul>
</div>

Só queria evitar que isso desabasse, pois não preciso, como faço?

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

Alguma sugestão?

css twitter-bootstrap-3 navbar collapse preventdefault sou eu
fonte

Respostas:

137

Depois de examinar de perto, não 300 mil linhas, mas há cerca de 3-4 propriedades CSS que você precisa substituir:

.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 menu não desmoronará.

DEMO ( jsfiddle )

EXPLICAÇÃO

As quatro propriedades CSS fazem o respectivo:

  1. A .collapsepropriedade 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 ocultar / mostrar. Portanto, essa propriedade substitui o padrão e mostra persistentemente esses elementos.

  2. Para que o menu do lado direito apareça 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, provavelmente não afetará 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. Portanto, temos a flutuação do lado esquerdo para a esquerda e a flutuação do lado direito para a direita, o que os traz em uma linha.

AyB
fonte
2
@gwho Acabei de adicionar uma explicação à resposta.
AyB de
1
Se ficar magro o suficiente, os elementos flutuados para a esquerda e para a direita podem se envolver (estou falando sobre os ulnão os lis). Qual é a melhor maneira de evitar que até isso aconteça?
ahnbizcad
2
Se seu único requisito é evitar que a lista UL / LI se torne vertical, o segundo CSS é tudo o que é necessário.
JamesB
1
As !importantdeclarações não são necessárias aqui, para mim funciona sem. Tente evitá-los sempre que possível (! Importante).
Tim-Erwin,
2
Os menus suspensos @ICanHasKittenz ainda mudam o comportamento quando <768 px, eles são exibidos na barra de navegação (beahviour recolhido) dentro de aparecer em uma caixa branca flutuante (comportamento não recolhido) como seria de esperar. E o título suspenso se amplia quando clicado, forçando outros elementos a se deslocarem. Basta adicionar uma lista suspensa em um elemento navbar e você verá por si mesmo.
Roubi de
24

O nabvar entrará em colapso em dispositivos pequenos. O ponto de colapso é definido por @grid-float-breakpointvariáveis. Por padrão, isso acontecerá antes 768px. Para telas abaixo da 768largura da tela de pixels, a barra de navegação terá a seguinte aparência:

insira a descrição da imagem aqui

É possível alterar o @grid-float-breakpointin variables.less e recompilar o Bootstrap. Ao fazer isso, você também terá que alterar @screen-xs-maxem navbar.less. Você terá que definir esse 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 menus suspensos no ponto de interrupção @ grid-float-break para sua versão móvel.

A maneira mais fácil é personalizar o bootstrap

encontrar variável:

 @grid-float-breakpoint

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

Para usuários SAAS

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

Gagan Gami
fonte
4
isso é muito útil, infelizmente, estou usando o CDN de bootstrap, então não consigo personalizar o arquivo principal de bootstrap. Alguma dica sobre como fazer isso em um arquivo css separado?
itme de
2
+1 para a variável @ grid-float-breakpoint-variable na página de personalização do bootstrap, isso funcionou para mim!
Wietse
4
Para usuários SASS: basta adicionar suas variáveis ​​personalizadas como $grid-float-breakpoint: 0px;antes da @import "bootstrap.scss";linha
Duvrai
5

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

Coloque isso no navbar-headerelemento após navbar-brand:

<div class="navbar-header-menu">
    <ul class="nav navbar-nav">
        <li class="active"><a href="#">I'm always visible</a></li>
    </ul>
    <form class="navbar-form" role="search">
        <div class="form-group">
            <input type="text" class="form-control" placeholder="Search">
        </div>
        <button type="submit" class="btn btn-default">Submit</button>
    </form>
</div>

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/

Advertência: navbar-rightpode ser usado para classificar elementos visualmente, mas não garante que puxará o elemento para a parte direita da tela. O violino demonstra esse comportamento com o navbar-form.

Jeremy Cook
fonte
0

Se você não estiver usando a versão less, 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;
  }
}
Michael Ribbons
fonte
0

A seguinte solução 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 classe .no-collapse a cada uma das listas e a classe .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
Cristi Draghici
fonte
0

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

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<nav class="navbar navbar-atp">
  <div class="container-fluid">
    <div class="">
      <ul class="nav navbar-nav nav-custom">
        <li>
          <a href="#" id="sidebar-btn"><span class="fa fa-bars">Toggle btn</span></a>
        </li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li>Nav item</li>
      </ul>
    </div>
  </div>
</nav>
Expandir trecho

desenterrar
fonte