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


94

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.


Ótima pergunta! A partir das informações que você forneceu em sua pergunta, fui capaz de implementar uma barra de navegação recolhível começando do nada. Obrigado!
methodMan

Respostas:


41

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.


12
Obrigado. bootstrap-responsive.cssestá enterrado na joia bootstrap-sass. Sim, eu poderia editá-lo, mas quando a gema for atualizada, eu teria que fazer novamente. Existe uma maneira de substituir a consulta @media, semelhante a substituir outros elementos CSS?
Mark Berry

Não consigo pensar em nenhuma maneira de conseguir a substituição sem redefinir todas as declarações CSS.
método de ação

Ok, obrigado. Eu tentei essa abordagem, substituindo essa linha no código da gema, e meio que funciona, mas recebo um preenchimento horizontal extra na barra de navegação abaixo de 767 px de largura, provavelmente por causa do CSS no @media (max-width: 767px)bloco. Parece que terei que fazer uma substituição mais ampla, conforme sugerido na resposta de Andrés Ilich.
Mark Berry

2
Como mencionei em meu comentário sobre a resposta de @Andres Ilich, atualizar diretamente o código-fonte parece o menor dos dois males quando se trata de sustentabilidade, então vou aceitar essa solução por enquanto. Posso viver com 767 px como o limite mínimo, embora provavelmente pudesse reduzir isso ainda mais criando um contêiner personalizado para a barra de navegação que não foi afetado por @media (max-width: 767px). Esperançosamente, o Bootstrap (ou bootstrap-sass) um dia incluirá um meio de usar variáveis ​​para definir os limites, mas acho que isso exigirá interpolação nos seletores de mídia .
Mark Berry

1
O CSS de substituição do ponto de interrupção da barra de navegação mudou para o Bootstrap 3 - aqui está um exemplo funcional para o 3.1: bootply.com/120604
Zim

73

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

(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);

6
Você pode visitar twitter.github.com/bootstrap/customize.html#variables e alterar a largura e o download. Não é necessário compilar.
Archonic

Link e texto do botão atualizados: getbootstrap.com/customize/#less-variables & "Compilar e fazer download"
digitalextremist

Isso também funciona com a gem do twitter-bootstrap-rails se você colocar algo como @navbarCollapseWidth: 600px;boostrap_and_overrides.css.less.
sffc

Isso parece não ser mais uma coisa no Bootstrap 3. :(
CodingWithSpike

E para o Bootstrap 4?
Aaron Franke

11

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.


Obrigado por sua resposta detalhada. Parece que funciona - ainda estou tentando descobrir como. Se bem entendi, você (1) clonou a @media (max-width: 979px)consulta original para fazer a nova @media (max-width: 550px)consulta. Em seguida, (2) você codificou manualmente uma nova consulta de 979 pixels para substituir os efeitos da consulta de 979 pixels no main bootstrap-responsive.css? A sequência de tags em seu CSS não parece seguir a sequência bootstrap-responsive.css, por isso estou tendo dificuldade em compará-las para ver o que você fez.
Mark Berry

@MarkBerry Você está no caminho certo. A @media (max-width: 550px)consulta que escrevi não segue a @media (max-width: 979px)sintaxe das consultas iniciais porque tudo o que fiz foi um exemplo rápido substituindo-a manualmente por meio de firebug e copiar / colar, fiquei com preguiça nisso, mas a maneira certa de fazer isso é como você mencionou na segunda ponto.
Andres Ilich

1
Esta é uma decisão difícil quando se trata de sustentabilidade. Temo que esse tipo de substituição extensa, embora forneça controle absoluto, significaria muitas verificações manuais após cada atualização do Bootstrap em vez de atualizar diretamente uma ou duas linhas de código-fonte de acordo com a sugestão de @Duopixel. Estou usando Bootstrap em parte porque eu sou não um gênio CSS, então eu acho que vou ir com a solução mais simples para agora.
Mark Berry

6

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!


Você poderia explicar onde colocou essa variável?
Andy Hayden

Antes de qualquer importação de Bootstrap, por exemplo@import "bootstrap";
Ashley


4

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


3

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";

2

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;
}

1

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


Você sabe como fazer isso com o SCSS?
bcackerman

desculpe, eu não. Achei que o bootstrap foi desenvolvido usando LESS, então você pode ter que fazer do jeito .css (veja as respostas do bootstrap 2 acima)
JasonS

1

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.


Isso quebra a funcionalidade
blnc

1

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


0

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 .


Aparentemente, o Bootstrap 2.0.4 mudou a estrutura do arquivo para o material responsivo. Veja o comentário do autor bootstrap-sass @Thomas McDonald. Ainda não investiguei isso, mas pode permitir uma modificação mais fácil do limite, mesmo com a versão SASS.
Mark Berry

Eu sinto Muito; Eu perdi completamente o comentário do Sass na pergunta ... Eu estava apenas focado no Bootstrap baseado na categoria. No entanto, a estrutura do arquivo parece a mesma que eu estava vendo no Bootstrap ... de qualquer forma, irei atualizar minha resposta para responder à pergunta.
Jason Capriotti

Não se preocupe. E eu concordo totalmente que a melhor solução seria o bootstrap oferecer nativamente uma variável ou série de variáveis ​​que controlam os limites de colapso da barra de navegação. Não tenho experiência suficiente com CSS, LESS ou SASS ou consultas de mídia para escrever esse aprimoramento;).
Mark Berry

0

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>

0

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;
        }
    }
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.