Alterar o ponto de interrupção de recolhimento da barra de navegação do bootstrap sem usar LESS


205

Atualmente, quando a largura do navegador cai abaixo de 768px, a barra de navegação muda para o modo recolhido. Quero alterar essa largura para 1000 px. Portanto, quando o navegador estiver abaixo de 1000 px, a barra de navegação mudará para o modo recolhido. Eu quero fazer isso sem usar menos, estou usando caneta não menos.

Meu problema é o mesmo que nesta pergunta: Bootstrap 3 Navbar Collapse

Mas todas as respostas nessas perguntas explicam como fazê-lo alterando a variável LESS. Eu não tenho lidado com menos, estou usando caneta, então eu quero saber como isso pode ser feito usando caneta ou outro método.

Obrigado!

Respostas:


50

Você precisa escrever uma consulta de mídia específica para isso; a partir da sua pergunta, abaixo de 768px, a barra de navegação será reduzida; portanto, aplique-a acima de 768px e abaixo de 1000px, assim:

@media (min-width: 768px) and (max-width: 1000px) {
   .collapse {
       display: none !important;
   }
}

Isso ocultará o recolhimento da barra de navegação até a ocorrência padrão da unidade de inicialização. À medida que a classe recolher, os recursos internos dentro da barra de navegação serão ocultados automaticamente, da mesma forma que você precisa definir seu css conforme o design desejado.


Atualmente, a barra de navegação é reduzida quando a largura está abaixo de 768px. Mas quero que a barra de navegação seja recolhida quando a largura estiver abaixo de 1000 px. Para isso, você não precisaria mostrar .collapse entre 768 e 1000?
Nearpoint

sim, collapseclasse é importante para a tela do celular de modo que se a largura estiver abaixo de 768px barra de navegação será display:none, por isso, a ação necessária seria aplicada dentro de 768 e 1000 marca ...
SaurabhLP

64
isso não funciona em Bootstrap 3 porque não há outra regra navbar-collapse.collapseque tem display: block !important. Incapacitante que irá resultar no botão Fechar não aparece ... então eu acho que é um monte de classes que precisa ser redefinido, não apenascollapse
Daniele Ricci

42
Sim, várias classes de Bootstrap devem ser substituídas na consulta de mídia personalizada: bootply.com/120604
Zim

1
Haha quem diabos construiu o bootstrap? Não achava que precisaríamos mudar esse pequeno detalhe?
MH

400

ATUALIZAÇÃO DE 2018

Bootstrap 4

Alterar o ponto de interrupção da barra de navegação é mais fácil no Bootstrap 4 usando as navbar-expand-*classes:

<nav class="navbar fixed-top navbar-expand-sm">..</nav>

  • navbar-expand-sm = menu móvel nas telas xs <576px
  • navbar-expand-md = menu móvel em telas sm <768px
  • navbar-expand-lg = menu móvel em telas md <992px
  • navbar-expand-xl = menu móvel em telas LG <1200px
  • navbar-expand = nunca use o menu móvel
  • (no expand class) = sempre use o menu móvel

Se você excluir, navbar-expand-*o menu móvel será usado nas alllarguras. Aqui está uma demonstração de todos os 6 estados da barra de navegação: Exemplo do Bootstrap 4 Navbar

Você também pode usar um ponto de interrupção personalizado (??? px) adicionando um pouco de CSS. Por exemplo, aqui estão 1300px.

@media (min-width: 1300px){
    .navbar-expand-custom {
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: flex-start;
    }
    .navbar-expand-custom .navbar-nav {
        flex-direction: row;
    }
    .navbar-expand-custom .navbar-nav .nav-link {
        padding-right: .5rem;
        padding-left: .5rem;
    }
    .navbar-expand-custom .navbar-collapse {
        display: flex!important;
    }
    .navbar-expand-custom .navbar-toggler {
        display: none;
    }
}

Bootstrap 4 personalizado Navbar Breakpoint
Exemplos de bootstrap 4 Navbar Breakpoint


Bootstrap 3

Para o Bootstrap 3.3.x, aqui está o CSS de trabalho para substituir o ponto de interrupção da barra de navegação. Mude 991pxpara a dimensão de pixel do ponto em que deseja que a barra de navegação seja recolhida ...

@media (max-width: 991px) {
  .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;
  }
}

Exemplo de trabalho para 991px: http://www.bootply.com/j7XJuaE5v6
Exemplo de trabalho para 1200px: https://www.codeply.com/go/VsYaOLzfb4 (com formulário de pesquisa)

Nota: O acima funciona para qualquer coisa acima de 768px . Se você precisar alterá-lo para menos de 768px, o exemplo de menos de 768px está aqui .



Experimente esta primeira visita: [link] ( getbootstrap.com/customize Localize: 'Menos variáveis' -> 'A mídia consulta pontos de interrupção' Alteração: @ valor da tela lg de 1200px a 1920px Localize: “Sistema de grade” -> @ grid-float -breakpoint Mudança:.. @ screen-sm-min para @ screen-lg Vá até o final da página clique em “Compilar e download” Extrair e utilizar estes arquivos baixados
rpalzona

6
Este código acima funciona quando eu defino um valor maior que 768px, no entanto, eu preciso obter o inverso ... Eu só quero que ele desmorone por exemplo em 400px, mas quando eu defino esse valor, o bootstrap parece estar recebendo o 768 original - Alguma ideia? Obrigado
Chris Richards

6
Embora essa resposta funcione como um encanto, mas esteja atrapalhando o menu suspenso , talvez você precise melhorar a resposta.
Abhishek Pandey

2
@AbhishekPandey eu encontrei útil esta resposta (parte sobre suspensa)
cbuchart

1
Obrigado. Ao contrário da "solução" com a marca de seleção ao lado, seu código realmente funciona.
22819 Michael S. Miller

46

no bootstrap3 , altere essa variável @ grid-float-breakpoint para a que você precisa. O valor padrão é 768px


17
Você pode postar um exemplo, por favor?
e.thompsy

2
Lembre-se de que, se você estiver usando sass e não quiser substituir o código do fornecedor (não deve), inclua o arquivo que contém a variável com seu valor personalizado antes dos arquivos sass de autoinicialização. O motivo é que todas as variáveis ​​do Bootstrap estão definidas como padrão! valores, portanto, precisamos substituir esses valores importando nossas variáveis ​​primeiro.
Makis K.

Por favor, adicione um exemplo de como fazer isso ... Eu sou novo no bootstrap e o grep revela 0 instâncias dessa variável no meu projeto.
Matt Clark

1
@MattClark @grid-float-breakpointestá definido no compilador: getbootstrap.com/customize - o valor padrão é, @screen-sm-minmas você pode alterá-lo para 1234px.
Rybo111

24

Finalmente, resolvi como alterar a largura do recolhimento brincando com '@ grid-float-breakpoint' em http://getbootstrap.com/customize/ .

Vá para a linha 2923 em bootstrap.css (também versão mínima) e altere @media screen and (min-width: 768px) { para@media screen and (min-width: 1000px) {

Portanto, o código acabará sendo:

@media screen and (min-width: 1000px) {
  .navbar-brand {
    float: left;
    margin-right: 5px;
    margin-left: -15px;
  }
  .navbar-nav {
    float: left;
    margin-top: 0;
    margin-bottom: 0;
  }
  .navbar-nav > li {
    float: left;
  }
  .navbar-nav > li > a {
    border-radius: 0;
  }
  .navbar-nav.pull-right {
    float: right;
    width: auto;
  }
  .navbar-toggle {
    position: relative;
    top: auto;
    left: auto;
    display: none;
  }
  .nav-collapse.collapse {
    display: block !important;
    height: auto !important;
    overflow: visible !important;
  }
}

Observe que o número da linha que você citou será diferente se você tiver usado o Personalizador: getbootstrap.com/customize
henrywright

1
Acabei de mudar o @grid-float-breakpointmeu responsive.lesstrabalho para mim!
cvng

6
Você deve substituir isso em outro arquivo CSS em vez de alterar diretamente os arquivos css de auto-inicialização.
Ivanka Todorova

1
Primeira visita: [link] ( getbootstrap.com/customize Localize: 'Menos variáveis' -> 'A mídia consulta pontos de interrupção' Alteração: @ valor do screen-lg de 1200px a 1920px Localize: “Sistema de grade” -> @ grid-float-breakpoint mudança:.. @ screen-sm-min para @ screen-lg Vá até o final da página clique em “Compilar e download” Extrair e utilizar estes arquivos baixados
rpalzona

13

Eu fiz isso com sucesso usando o seguinte código CSS.

@media(max-width:1000px)  {

    .navbar-collapse.collapse {
        display: none !important;
    }

    .navbar-collapse {
        overflow-x: visible !important;
    }

    .navbar-collapse.in {
      overflow-y: auto !important;
    }

    .collapse.in {
      display: block !important;
    }

}

2
Ele não mostra o botão de menu recolhido quando a largura está entre 768 e 1000 pixels.
artesão

4
@ artesão: Para o botão, use o seguinte: .navbar-toggle {display: block! important; } .navbar-header {width: 100%; altura: 60px; }
Aniket Suryavanshi,

3
continua a não mostrar o conteúdo dentro do menu do Hamburger
Behzad

13

No código-fonte Bootstrap 3.LESS , existe uma variável definida em variables.lesschamada @grid-float-breakpointque possui o seguinte comentário útil:

//**Point at which the navbar becomes uncollapsed
@grid-float-breakpoint: @screen-sm-min;

O @grid-float-breakpoint-maxvalor correspondente é definido para menos 1px:

//**Point at which the navbar begins collapsing
@grid-float-breakpoint-max: (@grid-float-breakpoint-max - 1);

Solução:

Então, basta definir o @grid-float-breakpointvalor para 1000 px e reconstruir bootstrap.lessem bootstrap.css:

por exemplo

@grid-float-breakpoint: 1000px;

Como reconstruir? Eu tentei esta linha de comando: $ lessc bootstrap.less bootstrap.cssmas nada aconteceu
AnthonyR 21/10

@ AnthonyRn: Eu não tenho idéia do que é a configuração do seu projeto. Simplesmente atualizei a fonte Bootstrap LESS no meu projeto do VS 2013 e ela foi reconstruída ao salvar. talvez você deva fazer uma nova pergunta?
Gone Coding

Meu problema foi resolvido usando a ferramenta de personalização on-line do Bootstrap aqui getbootstrap.com/customize Obrigado pela solução!
AnthonyR

1
Eu acho que essa deve ser a resposta aceita, pois usa métodos próprios do Bootstraps para definir o ponto de interrupção. Como exemplo, eu era capaz de 'reconstruir' o bootstrap simples e obter o resultado desejado configurando essa variável para o que eu precisava ser o ponto de interrupção.
Serge Melis

@AnthonyR Para reconstruir, use o comando grunt, grunt distque irá recriar o diretório dist. Você executará esse comando no diretório em que está o arquivo gruntfile.js. Referência: getbootstrap.com/getting-started/#grunt
Radmation

11

A maneira Sass de alterar as variáveis ​​de bootstrap é realmente documentada no bootstrap-sass página do github .

Apenas redefina as variáveis ​​antes de importar o bootstrap:

$grid-float-breakpoint: 1000px;

@import 'bootstrap';

7

Além da resposta do @Skely, para fazer com que os menus suspensos dentro da barra de navegação funcionem, adicione também as classes a serem substituídas. Código final abaixo:

    @media (min-width: 768px) and (max-width: 991px) {
        .navbar-nav .open .dropdown-menu {
            position: static;
            float: none;
            width: auto;
            margin-top: 0;
            background-color: transparent;
            border: 0;
            -webkit-box-shadow: none;
            box-shadow: none;
        }
        .navbar-nav .open .dropdown-menu > li > a {
            line-height: 20px;
        }
        .navbar-nav .open .dropdown-menu > li > a,
        .navbar-nav .open .dropdown-menu .dropdown-header {
            padding: 5px 15px 5px 25px;
        }
        .dropdown-menu > li > a {
            display: block;
            padding: 3px 20px;
            clear: both;
            font-weight: normal;
            line-height: 1.42857143;
            color: #333;
            white-space: nowrap;
        }
        .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;*/
            margin: 7.5px 50px 7.5px -15px
        }
        .navbar-nav>li {
            float: none;
        }
        .navbar-nav>li>a {
            padding-top: 10px;
            padding-bottom: 10px;
        }
        .navbar-text {
            float: none;
            margin: 15px 0;
        }
        /* since 3.1.0 */
        .navbar-collapse.collapse.in { 
            display: block!important;
        }
        .collapsing {
            overflow: hidden!important;
        }
    }

código de demonstração


4

No bootstrap v4, a navegação pode ser recolhida mais cedo ou mais tarde usando diferentes classes css

por exemplo:

  • navbar-toggleable-sm
  • navbar-toggleable-md
  • navbar-toggleable-lg

Com o botão para a navegação:

  • escondido-sm-up
  • md-oculto
  • escondido-lg-up

No atual alfa, parece apenas ir navbar-toggleable-smpara mim, xsnunca faz alternar. Poderia ser eu fazendo algo errado. Obrigado!
Nerdwaller

@nerdwaller parece que você está certo, fez uma edição de xs para sm.
whitneyland

3

Para o Bootstrap 3.3, este é o único código que você precisa:

@media (min-width: 768px) and (max-width: 1000px) {
   .navbar-collapse.collapse {
       display: none !important;
   }
   .navbar-toggle{
        display: block !important;
   }
   .navbar-header{
        float: none;
   }
}

Não funciona completamente. Os itens de menu exibidos não são verticais, mas horizontais.
Volomike

3

Isso funcionou para mim Bootstrap3

@media (min-width: 768px) {
    .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;
          margin: 7.5px -15px;
      }
      .navbar-nav>li {
          float: none;
      }
      .navbar-nav>li>a {
          padding-top: 10px;
          padding-bottom: 10px;
      }
}

Demorou um pouco para descobrir esses dois:

.navbar-collapse.collapse {
   display: none!important;
}
.navbar-collapse.collapse.in {
   display: block!important;
}

Isso funcionou para mim. A única exceção é que a largura mínima do pixel deve ser 1000 px na sua amostra acima.
Sascha

2

Sua melhor aposta seria usar uma porta do processador CSS usado.

Sou um grande fã do SASS, então atualmente uso https://github.com/thomas-mcdonald/bootstrap-sass

Parece que há um garfo para a Stylus aqui: https://github.com/Acquisio/bootstrap-stylus

Caso contrário, Search & Replace é seu melhor amigo na versão css ...


Portanto, para a opção pesquisar e substituir, isso significa editar diretamente as consultas de mídia bootstrap.css? Posso alterar uma consulta de mídia que se aplica apenas à barra de navegação? Disseram-me que não é uma boa ideia editar os arquivos de bootstrap de origem, mas não sei por que, o que você acha?
Nearpoint

1

Oi eu acho que você pode fazê-lo usando CSS como este, você pode alterar o menu de inicialização do ponto de interrupção

    @media (max-width: 1200px) {
    .navbar-header {
        float: none;
    }
    .navbar-left,.navbar-right {
        float: none !important;
    }
    .navbar-toggle {
        display: block;
    }

    .navbar-collapse.collapse {
        display: none!important;
    }
    .navbar-nav {
        float: none!important; 
    }
    .navbar-nav>li {
        float: none;
    } 
    .collapse.in{
        display:block !important;
    }
   .navbar-nav .open .dropdown-menu {
       position: static;
       float: none;
       width: auto;
       margin-top: 0;
       background-color: transparent;
       border: 0;
       -webkit-box-shadow: none;
       box-shadow: none;
    }
}

1

As barras de navegação podem utilizar as classes .navbar-toggler, .navbar-collapse e .navbar-expand {-sm | -md | -lg | -xl} para mudar quando o conteúdo se fechar atrás de um botão. Em combinação com outros utilitários, você pode escolher facilmente quando mostrar ou ocultar elementos específicos.

Para barras de navegação que nunca são recolhidas, adicione a classe .navbar-expand na barra de navegação. Para barras de navegação que sempre são recolhidas, não adicione nenhuma classe .navbar-expand.

Por exemplo :

<nav class="navbar navbar-expand-lg"></nav>

O menu para celular está sendo exibido em tela grande.

Referência: https://getbootstrap.com/docs/4.0/components/navbar/


Sim, este funciona para mim exatamente como eu precisava. Obviamente, se você precisar de pontos de interrupção mais específicos, será necessário configurar sua própria consulta de mídia (daí a resposta favorável a essa pergunta)
Coderhi

0

Isto é o que fez o truque para mim:

@media only screen and (min-width:769px) and (max-width:1000px){
.navbar-collapse.collapse {
    display: none !important;
}
.navbar-collapse.collapse.in {
    display: block !important;
}
.navbar-header .collapse, .navbar-toggle {
    display:block !important;
}

Com a sua solução e a da Veek, percebo que entre 768 e 1000 as margens se expandem de maneira inadequada. Eles estão bem fora desses limites. Com sua solução, o ícone do menu recolhido também não fica à direita após o recolhimento, mas pressiona a "marca".
Mike O'Connor

Sinto muito, eu aparentemente parei. Ainda tenho esse problema de margens inapropriadamente amplas aparecendo dentro desses limites. No entanto, vejo agora que um exemplo oficial de bootstrap online exibe o mesmo problema de margens, nativamente.
Mike O'Connor

0

No bootstrap 4, se você deseja substituir quando navbar-expand- *, expande e contrai e mostra e oculta o hambúrguer (navbar-toggler), você precisa encontrar esse estilo / definição no bootstrap.css e redefini-lo em seu próprio customstyle.css (ou diretamente no bootstrap.css, se você quiser).

Por exemplo. Eu queria que o navbar-expand-lg fosse recolhido e mostrasse o navbar-toggler em 950px. No bootstrap.css, encontro:

@media (max-width: 991.98px) {
  .navbar-expand-lg > .container,
  .navbar-expand-lg > .container-fluid {
    padding-right: 0;
    padding-left: 0;
  }
}

E abaixo disso ...

@media (min-width:992px) { 
    ... lots of styling ...
}

Copiei as duas consultas @media e as colei no meu style.css, depois modifiquei o tamanho para atender às minhas necessidades. No meu caso, eu queria que ele desabasse a 950px. As consultas @media devem ter tamanhos diferentes (suponho), por isso defino a largura máxima do contêiner como 949,98px e usei o 950px para a outra consulta @media e, portanto, o código a seguir foi anexado ao meu style.css. Não foi fácil separar as soluções distorcidas que encontrei no Stackoverflow e em outros lugares. Espero que isto ajude.

@media (max-width: 949.98px) {
    .navbar-expand-lg > .container,
    .navbar-expand-lg > .container-fluid {
        padding-right: 0;
        padding-left: 0;
    }
}

@media (min-width: 950px) {
    .navbar-expand-lg {
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-flow: row nowrap;
        flex-flow: row nowrap;
        -webkit-box-pack: start;
        -ms-flex-pack: start;
        justify-content: flex-start;
    }
    .navbar-expand-lg .navbar-nav {
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-direction: row;
        flex-direction: row;
    }
    .navbar-expand-lg .navbar-nav .dropdown-menu {
        position: absolute;
    }
    .navbar-expand-lg .navbar-nav .dropdown-menu-right {
        right: 0;
        left: auto;
    }
    .navbar-expand-lg .navbar-nav .nav-link {
        padding-right: 0.5rem;
        padding-left: 0.5rem;
    }
    .navbar-expand-lg > .container,
    .navbar-expand-lg > .container-fluid {
        -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
    }
    .navbar-expand-lg .navbar-collapse {
        display: -webkit-box !important;
        display: -ms-flexbox !important;
        display: flex !important;
        -ms-flex-preferred-size: auto;
        flex-basis: auto;
    }
    .navbar-expand-lg .navbar-toggler {
        display: none;
    }
    .navbar-expand-lg .dropup .dropdown-menu {
        top: auto;
        bottom: 100%;
    }
}

0

Aqui meu código de trabalho usando em React with Bootstrap

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
    crossorigin="anonymous">
<style>
  @media (min-width: 768px) and (max-width: 1000px) {
   .navbar-collapse.collapse {
       display: none !important;
   }
   .navbar-toggle{
        display: block !important;
   }
   .navbar-header{
        float: none;
   }
}
  </style>

0

Agora é suportado no Bootstrap 4.4

navbar-expand-sm 

Sim, corrija, mas você precisaria do navbar-expand-lg para recolher o nav em telas grandes
Coderhi
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.