Como alterar o limite de colapso da barra de navegação usando Twitter bootstrap-responsive?

Estou usando o Twitter Bootstrap 2.0.1 em um projeto Rails 3.1.2, implementado com bootstrap-sass. Estou carregando bootstrap.cssos bootstrap-responsive.cssarquivos e os arquivos, bem como o bootstrap-collapse.jsJavascript.

Eu tenho um layout fluido com uma barra de navegação semelhante ao exemplo . Isso segue as instruções de "variação responsiva" da barra de navegação aqui . Funciona bem: se a página for mais estreita do que cerca de 940 px, a barra de navegação se fecha e exibe um "botão" no qual posso clicar para expandir.

No entanto, minha barra de navegação parece boa com cerca de 550 px de largura, ou seja, não precisa ser recolhida a menos que a tela seja muito estreita.

Como faço para dizer ao Bootstrap para recolher a barra de navegação apenas se a tela tiver menos de 550 px de largura?

Observe que, neste ponto, não quero modificar os outros comportamentos responsivos, por exemplo, empilhar elementos em vez de exibi-los lado a lado.

Você está procurando a linha 239 de bootstrap-responsive.css

@media (max-width: 979px) {...}

Onde o max-widthvalor aciona o nav responsivo. Altere-o para 550 px ou mais e deve redimensionar bem.

Bootstrap> 2.1 && <3

• Use a versão less do bootstrap
• Altere a variável @navbarCollapseWidth em variables.less
• Recompile.

Atualização de 2013: o jeito fácil

• Visite http://getbootstrap.com/customize/#less-variables
• Altere @navbarCollapseWidth no campo de formulário
• Clique em "Compilar e baixar".

(THX para Archonic via comentário)

Atualização 2014: Bootstrap 3.1.1 e 3.2 (eles até o adicionaram à documentação )

Se você estiver personalizando ou substituindo / editando .lessvariáveis, você está procurando:

//** Point at which the navbar becomes uncollapsed.
@grid-float-breakpoint:     @screen-sm-min;
//** Point at which the navbar begins collapsing.
@grid-float-breakpoint-max: (@grid-float-breakpoint - 1);

Você pode estabelecer uma nova @mediaconsulta para soltar os elementos da barra de navegação conforme achar necessário, tudo o que você precisa fazer é redefinir o anterior para acomodar sua nova consulta com a largura de queda desejada. Veja isso por exemplo:

CSS

/** Modified Responsive CSS **/

@media (max-width: 979px) {
    .btn-navbar {
        display: none;
    }
    .navbar .nav-collapse {
        clear: none;
    }

    .nav-collapse {
        height: auto;
        overflow: auto;
    }

    .navbar .nav {
        float: left;
        margin: 0 10px 0 0;
    }

    .navbar .brand {
        margin-left: -20px;
        padding: 8px 20px 12px;
    }

    .navbar .dropdown-menu:before, .navbar .dropdown-menu:after {
        display: block;
    }

    .navbar .nav > li > a, .navbar .dropdown-menu a {
        border-radius: 0;
        color: #999999;
        font-weight: normal;
        padding: 10px 10px 11px;
    }

    .navbar .nav > li {
        float: left;
    }

    .navbar .dropdown-menu {
        background-clip: padding-box;
        background-color: #FFFFFF;
        border-color: rgba(0, 0, 0, 0.2);
        border-radius: 0 0 5px 5px;
        border-style: solid;
        border-width: 1px;
        box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
        display: none;
        float: left;
        left: 0;
        list-style: none outside none;
        margin: 0;
        min-width: 160px;
        padding: 4px 0;
        position: absolute;
        top: 100%;
        z-index: 1000;
    }

    .navbar-form, .navbar-search {
        border:none;
        box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1) inset, 0 1px 0 rgba(255, 255, 255, 0.1);
        float: left;
        margin-bottom: 0;
        margin-top:6px;
        padding: 9px 15px;
    }

    .navbar .nav.pull-right {
        float: right;
        margin-left: auto;
    }
}

@media (max-width: 550px) {
    .btn-navbar {
        display: block;
    }
    .navbar .nav-collapse {
        clear: left;
    }

    .nav-collapse {
        height: 0;
        overflow: hidden;
    }

    .navbar .nav {
        float: none;
        margin: 0 0 9px;
    }

    .navbar .brand {
        margin: 0 0 0 -5px;
        padding-left: 10px;
        padding-right: 10px;
    }

    .navbar .dropdown-menu:before, .navbar .dropdown-menu:after {
        display: none;
    }

    .navbar .nav > li > a, .navbar .dropdown-menu a {
        border-radius: 3px 3px 3px 3px;
        color: #999999;
        font-weight: bold;
        padding: 6px 15px;
    }

    .navbar .nav > li {
        float: none;
    }

    .navbar .dropdown-menu {
        background-color: transparent;
        border: medium none;
        border-radius: 0 0 0 0;
        box-shadow: none;
        display: block;
        float: none;
        left: auto;
        margin: 0 15px;
        max-width: none;
        padding: 0;
        position: static;
        top: auto;
    }

    .navbar-form, .navbar-search {
        border-bottom: 1px solid #222222;
        border-top: 1px solid #222222;
        box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1) inset, 0 1px 0 rgba(255, 255, 255, 0.1);
        float: none;
        margin: 9px 0;
        padding: 9px 15px;
    }

    .navbar .nav.pull-right {
        float: none;
        margin-left: 0;
    }

}

No código a seguir, você pode ver como incluí a @mediaconsulta original que lida com a queda antes da 979pxmarca e a nova consulta para oferecer suporte ao ponto de queda desejado 550px. Modifiquei a consulta original diretamente do css responsivo ao bootstrap para redefinir todos os estilos aplicados a essa consulta específica para os elementos navbar e os transferi para a nova consulta que carrega o ponto de soltar de que você precisa. Desta forma, podemos comutar todos os estilos da consulta original para a nova consulta sem mexer na folha de estilo responsiva ao bootstrap, desta forma os valores padrão ainda se aplicarão aos outros elementos do seu documento.

Aqui está uma breve demonstração com uma consulta de mídia configurada para ser exibida 550pxconforme sua necessidade: http://jsfiddle.net/wU8MW/

Observação: coloquei as @mediaconsultas modificadas acima bem abaixo do quadro css, pois o novo css modificado deve ser carregado primeiro do que o css responsivo.

bootstrap-sass suportará a variável $ navbarCollapseWidth na próxima versão (2.2.1.0). Você poderá atualizá-lo para fazer exatamente o que deseja quando a versão estiver no ar!

Em agosto de 2013, uma página "Personalizar e baixar" do Bootstrap 3 pode ser encontrada em http://getbootstrap.com/customize/

Com o Bootstrap 3, a variável relevante é @ grid-float-breakpoint.

A seguinte página Stack Overflow tem detalhes adicionais: Bootstrap 3 Navbar Collapse

Suspeito (e espero) que isso seja implementado oficialmente em breve. Nesse ínterim, estou apenas fazendo um hack simples de css, usando visible-phone no botão suspenso e visible-tablet em um segundo conjunto de botões que coloquei na barra de navegação. Antes parecia assim:

<div class="navbar navbar-fixed-top">
  <div class="navbar-inner">
    <div class="container-fluid">
      <a href="<%= root_url %>" class="brand brandtag"></a>
      <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </a>
      <div class="nav-collapse">
        <ul class="nav">
          <li>Navigation 1</li>
          <li>Navigation 2</li>
          <li>Navigation 3</li>
        </ul>
      </div>
    </div>
  </div>
</div>

E agora parece:

<div class="navbar navbar-fixed-top">
  <div class="navbar-inner">
    <div class="container-fluid">
      <a href="<%= root_url %>" class="brand brandtag"></a>
      <a class="btn btn-navbar visible-phone" data-toggle="collapse" data-target=".nav-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </a>
      <div class="visible-tablet">
        <ul class="nav">
          <li>Navigation 1</li>
          <li>Navigation 2</li>
          <li>Navigation 3</li>
        </ul>
      </div>
      <div class="nav-collapse">
        <ul class="nav">
          <li>Navigation 1</li>
          <li>Navigation 2</li>
          <li>Navigation 3</li>
        </ul>
      </div>
    </div>
  </div>
</div>

Observe que a ordem dos elementos é importante, caso contrário, você pode ter problemas com os elementos indo para a próxima linha

Eu criei um arquivo SCSS separado que listou todas as parciais que o bootstrap precisa, dessa forma eu posso ligar e desligar as parciais dependendo das necessidades de nosso site. Dessa forma, posso substituir a variável de ponto de interrupção facilmente. Aqui está o que eu tenho:

// Core variables and mixins
$grid-float-breakpoint: 991px;
@import "bootstrap/variables";
@import "bootstrap/mixins";

// Reset
@import "bootstrap/normalize";
//@import "bootstrap/print";

// Core CSS
@import "bootstrap/scaffolding";
@import "bootstrap/type";
//@import "bootstrap/code";
@import "bootstrap/grid";
@import "bootstrap/tables";
@import "bootstrap/forms";
@import "bootstrap/buttons";

// Components
@import "bootstrap/component-animations";
@import "bootstrap/glyphicons";
@import "bootstrap/dropdowns";
//@import "bootstrap/button-groups";
//@import "bootstrap/input-groups";
@import "bootstrap/navs";
@import "bootstrap/navbar";
@import "bootstrap/breadcrumbs";
@import "bootstrap/pagination";
@import "bootstrap/pager";
@import "bootstrap/labels";
@import "bootstrap/badges";
//@import "bootstrap/jumbotron";
//@import "bootstrap/thumbnails";
@import "bootstrap/alerts";
//@import "bootstrap/progress-bars";
//@import "bootstrap/media";
//@import "bootstrap/list-group";
@import "bootstrap/panels";
//@import "bootstrap/wells";
@import "bootstrap/close";

// Components w/ JavaScript
@import "bootstrap/modals";
@import "bootstrap/tooltip";
//@import "bootstrap/popovers";
//@import "bootstrap/carousel";

// Utility classes
@import "bootstrap/utilities";
@import "bootstrap/responsive-utilities";

Aqui está o meu código (todas as outras soluções mostraram uma barra de rolagem funky quando a barra de navegação caiu, então eu editei o código, mas não o fez). Não consegui postar em outra resposta, então farei aqui para que outros encontrem. Estou usando rails para fazer isso com o Bootstrap 3.0.

ativos / folhas de estilo / estrutura e substituições, cole isto: (Ajuste a largura máxima para qualquer valor para atingir seu objetivo.)

@media (max-width: 2500px) {
.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-collapse.collapse.in {
    display: block!important;
}
.navbar-nav {
    float: none!important;
}
.navbar-nav>li {
    float: none;
}
.navbar-nav>li>a {
    padding-top: 10px;
    padding-bottom: 10px;
}

Bootstrap 3.x

usando MENOS , você pode alterar o valor de @screen-smallpara atingir seu tamanho mínimo

exemplo: @screen-small: 600px;

Eu uso isso apenas para mudar para o modo "dispositivo minúsculo" quando a largura for inferior a 600px

Bootstrap 3.x

usando SASS, você pode alterar o valor de $ screen-sm para atingir seu tamanho mínimo

exemplo: $ screen-sm: 600px;

Você precisa colocar este valor em seu arquivo application.scss antes do @import "bootstrap";

$screen-sm:600px;
@import "bootstrap";

Menos variáveis ​​começam com "@" apenas alteradas para "$" para substituí-las antes da importação.

Aqui está a lista de variáveis.

Bootstrap 4.x

É muito fácil alterar o limite de recolhimento no Bootstrap 4.x. Existem 6 casos:

1. Sempre expanda, nunca recolha (ou seja, o ponto de interrupção é 0px): <nav class="navbar navbar-expand">...</nav>
2. O ponto de interrupção é sm (576px):<nav class="navbar navbar-expand-sm">...</nav>
3. O ponto de interrupção é md (768px):<nav class="navbar navbar-expand-md">...</nav>
4. O ponto de interrupção é lg (992px):<nav class="navbar navbar-expand-lg">...</nav>
5. O ponto de interrupção é xl (1200px):<nav class="navbar navbar-expand-xl">.../nav>
6. Sempre reduza, nunca expanda (ou seja, o ponto de interrupção é ∞px). : <nav class="navbar">...</nav>(Apenas remova a navbar-expand-*classe. Móvel primeiro como no Bootstrap 4.x)

Crédito neste artigo de Carol Skelly. Encontrei https://medium.com/wdstack/examples-bootstrap-4-navbar-b3c9dc0edc1a

Este é um ótimo exemplo de onde você poderia estar usando a versão MENOS dos arquivos CSS do Bootstrap. Veja abaixo como fazer isso.

Ainda melhor seria enviar isso como uma solicitação pull no Github para que todos possam se beneficiar e seu "código personalizado" faça parte do Bootstrap daqui para frente.

• Adicione uma variável a variables.lessque especifique quando recolher a barra de navegação. Algo como:@navCollapseWidth: 979px
• Então modifique responsive-navbar.less...
  • Mudar @media (max-width: 979px)para cima@media (max-width: @navCollapseWidth)
  • Na parte inferior, mude @media (min-width: 980px)para@media (max-width: @navCollapseWidth - 1)

Claro ... você teria que compilar LESS usando um dos métodos sugeridos .

Levando o hack de tyler ainda mais longe, adicionando um bloco de classe de telefone visível e uma classe de telefone oculto a um item na navegação recolhível principal, você pode 'retirar' um ou dois dos itens recolhidos para exibir até mesmo na barra de navegação do telefone.

<div class="navbar navbar-fixed-top">
  <div class="navbar-inner">
    <div class="container-fluid">
      <a href="<%= root_url %>" class="brand brandtag"></a>
      <a class="btn btn-navbar visible-phone" data-toggle="collapse" data-target=".nav-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </a>
      <div class="visible-tablet">
        <ul class="nav">
          <li>Navigation 1</li>
          <li>Navigation 2</li>
          <li>Navigation 3</li>
        </ul>
      </div>
      <div class="visible-phone">
        <ul class="nav">
          <li>Navigation 1</li>
        </ul>
      </div>
      <div class="nav-collapse">
        <ul class="nav">
          <li class="hidden-phone">Navigation 1</li>
          <li>Navigation 2</li>
          <li>Navigation 3</li>
        </ul>
      </div>
    </div>
  </div>
</div>

Basta escrever este código em seu arquivo style.css personalizado e ele funcionará

@media (min-width: 768px) and (max-width: 991px) {
        .navbar-collapse.collapse {
            display: none !important;
        }
        .navbar-collapse.collapse.in {
            display: block !important;
        }
        .navbar-header .collapse, .navbar-toggle {
            display:block !important;
        }
        .navbar-header {
            float:none;
        }
        .navbar-nav {
            float: none !important;
            margin: 0px;
        }
        .navbar-nav {
            margin: 7.5px -15px;
        }
        .nav > li {
            position: relative;
            display: block;
        }
        .navbar-nav > li {
            float: none !important;
        }
        .nav > li > a {
            position: relative;
            display: block;
            padding: 10px 15px;
        }
        .navbar-collapse {
            padding-right: 15px;
            padding-left: 15px;
            overflow-x: visible;
            border-top: 1px solid transparent;
            box-shadow: 0px 1px 0px rgba(255, 255, 255, 0.1) inset;
        }
        .nav {
            padding-left: 0px;
            margin-bottom: 0px;
            list-style: outside none none;
        }
    }