Barra de navegação do Bootstrap 3

Existe alguma maneira de aumentar o ponto em que a barra de navegação do bootstrap 3 entra em colapso (ou seja, de forma que ela desmorone em uma lista suspensa nos tablets retratos)?

Esses dois eram aplicáveis ​​ao bootstrap 2, mas não agora!

Como alterar o limite de recolhimento da barra de navegação usando o Twitter responsivo à inicialização?

Alterar o ponto de interrupção da barra de navegação responsiva padrão

Eu tive o mesmo problema hoje.

Bootstrap 4

É uma funcionalidade nativa: https://getbootstrap.com/docs/4.0/components/navbar/#responsive-behaviors

Você precisa usar .navbar-expand{-sm|-md|-lg|-xl}classes:

<nav class="navbar navbar-expand-md navbar-light bg-light">

Bootstrap 3

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

Basta alterar 991pxpor 1199pxpor mdtamanhos.

Demo

A grande diferença entre o Bootstrap 2 e o Bootstrap 3 é que o Bootstrap 3 é "móvel primeiro".

Isso significa que os estilos padrão são projetados para dispositivos móveis e, no caso das Navbars, isso significa que "é recolhido" por padrão e "expande" quando atinge um determinado tamanho mínimo.

O site do Bootstrap 3 realmente tem uma "dica" sobre o que fazer: http://getbootstrap.com/components/#navbar

Personalizar o ponto de recolhimento

Dependendo do conteúdo da barra de navegação, pode ser necessário alterar o ponto em que a barra de navegação alterna entre o modo recolhido e o horizontal. Personalize a variável @ grid-float-breakpoint ou adicione sua própria consulta de mídia.

Se você for recompilar seu LESS, encontrará a variável LESS observada no variables.lessarquivo. No momento, está definido como "expandir", @media (min-width: 768px)que é uma "tela pequena" (ou seja, um tablet) pelos termos do Bootstrap 3.

@grid-float-breakpoint: @screen-tablet;

Se você quiser manter o colapso por mais algum tempo, pode ajustá-lo da seguinte forma:

@grid-float-breakpoint: @screen-desktop; (Ponto de interrupção de 992 px)

ou expandir mais cedo

@grid-float-breakpoint: @screen-phone (Ponto de interrupção de 480px)

Se você deseja que ele se expanda mais tarde e não lide com a recompilação do LESS, será necessário substituir os estilos que são aplicados na 768pxconsulta de mídia e fazê-los retornar ao valor anterior. Em seguida, adicione-os novamente no momento apropriado.

Não tenho certeza se existe uma maneira melhor de fazer isso. Recompilar o Bootstrap MENOS às suas necessidades é a melhor (mais fácil) maneira. Caso contrário, você terá que encontrar todas as consultas de mídia CSS que afetam a sua Barra de navegação, substituí-las pelos estilos padrão na largura de 768px e depois revertê-las com uma largura mínima maior.

Recompilar o LESS fará toda essa mágica para você apenas alterando a variável. Qual é o objetivo dos pré-compiladores LESS / SASS. =)

(observe, eu pesquisei todos eles, são cerca de 100 linhas de código, o que é irritante o suficiente para eu abandonar a ideia e apenas recompilar o Bootstrap para um determinado projeto e evitar bagunçar algo por acidente)

Espero que ajude!

Felicidades!

A maneira mais fácil é personalizar o bootstrap

encontrar variável:

 @grid-float-breakpoint

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

estes são controlados em variáveis, não há necessidade de mexer na fonte. com o bootstrap, tente primeiro as variáveis ​​e, em seguida, substitua. então volte e tente as variáveis ​​novamente;)

Eu usei o bootstrap-sass com trilhos, mas é o mesmo com o padrão MENOS.

FILE: main.css.scss
-------------------

// control the screen sizes
$screen-xs-min: 300px;
$screen-sm-min: 400px;
$screen-md-min: 800px;
$screen-lg-min: 1200px;

// this tells which screen size to use to start breaking on
// will tell navbar when to collapse
$grid-float-breakpoint: $screen-md-min;

// then import your bootstrap
@import "bootstrap";

é isso aí! essa página de referência de variáveis ​​é super útil: https://github.com/twbs/bootstrap/blob/master/less/variables.less

Graças a Seb33300, consegui esse trabalho. No entanto, uma parte importante parece estar faltando. Pelo menos no Bootstrap versão 3.1.1.

Meu problema foi que a barra de navegação caiu de acordo com a largura correta, mas o botão de menu não funcionou. Não consegui expandir e recolher o menu.

Isso ocorre porque a classe collapse.in é substituída pela! Important em .navbar-collapse.collapse e pode ser resolvida adicionando também o "collapse.in". Exemplo de Seb33300 concluído abaixo:

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

Eu queria votar e comentar a resposta de jmbertucci, mas ainda não sou confiável com os controles. Eu tive o mesmo problema e resolvi como ele disse. Se você estiver usando o Bootstrap 3.0, edite as variáveis ​​LESS em variable.less Os pontos de interrupção responsivos são definidos em torno da linha 200:

@screen-xs:                  480px;
@screen-phone:               @screen-xs;

// Small screen / tablet
@screen-sm:                  768px;
@screen-tablet:              @screen-sm;

// Medium screen / desktop
@screen-md:                  992px;
@screen-desktop:             @screen-md;

// Large screen / wide desktop
@screen-lg:                  1200px;
@screen-lg-desktop:          @screen-lg;

// So media queries don't overlap when required, provide a maximum
@screen-xs-max:              (@screen-sm - 1);
@screen-sm-max:              (@screen-md - 1);
@screen-md-max:              (@screen-lg - 1);

Em seguida, defina o valor de recolhimento da barra de navegação usando a variável @ grid-float-breakpoint em aproximadamente a linha 232. Por padrão, é definido como @ screen-tablet . Se você quiser, pode usar um valor de pixel, mas eu prefiro usar as variáveis ​​LESS.

Se o problema que você enfrentar for o menu dividido em várias linhas , tente um dos seguintes:

1) Tente reduzir o número de itens de menu ou seu tamanho, como remover itens de menu ou encurtar as palavras.

2) Reduzindo o preenchimento entre os itens do menu, desta forma:

.navbar .nav > li > a {
padding: 10px 15px 10px; /* Change here the second value for padding-left and padding right */
}

O preenchimento padrão é 15px nos dois lados (esquerdo e direito).

Se você preferir alterar cada lado, use:

padding-left: 7px; 
padding-right: 8px;

Essa configuração também afeta a lista suspensa.

Isso não responde à pergunta, mas pode ajudar outras pessoas que não querem mexer com o CSS ou usando variáveis ​​LESS. As duas abordagens comuns para resolver esse problema.

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

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

Estou preocupado com os problemas de manutenção e atualização no caminho da personalização do Bootstrap. Posso documentar as etapas de personalização hoje e espero que a pessoa que atualiza o Bootstrap daqui a três anos encontre a documentação e aplique novamente as etapas (que podem ou não funcionar nesse ponto). Um argumento pode ser feito de qualquer maneira, suponho, mas prefiro manter qualquer personalização no meu código.

Eu não entendo direito como a abordagem do Seb33300 pode funcionar. Certamente não funcionou com o Bootstrap 4.0.3. Para que a barra de navegação seja expandida em 1200 em vez de 768, as regras para as duas consultas de mídia devem ser substituídas para impedir a expansão em 768 e forçar a expansão em 1200.

Eu tenho um menu mais longo que envolveria o iPad no modo Retrato. A seguir, o menu é recolhido até o ponto de interrupção 1200:

@media (min-width: 768px) {
    .navbar-header {
        float: none; }
    .navbar-toggle {
        display: block; }
    .navbar-fixed-top .navbar-collapse, 
    .navbar-static-top .navbar-collapse, 
    .navbar-fixed-bottom .navbar-collapse {
        padding-right: 15px;
        padding-left: 15px; }
    .navbar-collapse.collapse {
        display: none !important; }
        .navbar-collapse.collapse.in { 
        display: block!important; 
        margin-top: 0px; }
}
@media (min-width: 1200px) {
    .navbar-header {
        float: left; }
    .navbar-toggle {
    display: none; }
    .navbar-fixed-top .navbar-collapse, 
    .navbar-static-top .navbar-collapse, 
    .navbar-fixed-bottom .navbar-collapse {
        display: block !important; }
}

Eu fiz o caminho CSS com a minha instalação do Bootstrap 3.0.0, pois não conheço o LESS. Aqui está o código que eu adicionei ao meu arquivo CSS personalizado (que eu carrego após o bootstrap.css) que me permitiu controlar, para que o menu estivesse sempre funcionando como um arquivo accordion.
Nota: Eu passei toda a minha navbardentro de uma div com a classe sidebarpara separar o comportamento que eu queria por isso não afetou outros navbars no meu site, como o menu principal. Ajuste de acordo com suas necessidades, espero que ajude.

/* Sidebar Menu Fix */

.sidebar .navbar-nav {
  margin: 7.5px -15px;
}
.sidebar .navbar-nav > li > a {
  padding-top: 10px;
  padding-bottom: 10px;
  line-height: 20px;
}
.sidebar .navbar-collapse {
  max-height: 500px;
}
.sidebar .navbar-nav .open .dropdown-menu {
  position: static;
  float: none;
  width: auto;
  margin-top: 0;
  background-color: transparent;
  border: 0;
  box-shadow: none;
}
.sidebar .dropdown-menu > li > a {
  color: #777777;
}
.sidebar .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover,
.sidebar .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {
  color: #333333;
  background-color: transparent;
}
.sidebar .navbar-default .navbar-nav .open .dropdown-menu > .active > a,
.sidebar .navbar-default .navbar-nav .open .dropdown-menu > .active > a:hover,
.sidebar .navbar-default .navbar-nav .open .dropdown-menu > .active > a:focus {
  color: #555555;
  background-color: #e7e7e7;
}
.sidebar .navbar-nav {
  float: none;
}
.sidebar .navbar-nav > li {
  float: none;
}

Nota adicional: Eu também adicionei uma alteração na alternância do menu principal navbar(uma vez que o código acima no meu site é usado para um "submenu" ao lado.

Eu mudei:

<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">

para dentro:

<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse-topmenu">

E então também ajustado:

<div class="navbar-collapse collapse navbar-collapse">

para dentro:

<div class="navbar-collapse collapse navbar-collapse-topmenu">

Se você tiver apenas um navbar, acho que não precisará se preocupar com isso, mas isso me ajudou no meu caso.

E para quem deseja recolher com uma largura menor que o 768px padrão (expandir com largura menor que 768px), este é o css necessário:

@media (min-width: 600px) {
.navbar-header {
        float: left;
}
.navbar-toggle {
    display: none;
}
.navbar-collapse {
    border-top: 0 none;
    box-shadow: none;
    width: auto;
}
.navbar-collapse.collapse {
    display: block !important;
    height: auto !important;
    padding-bottom: 0;
    overflow: visible !important;
}
.navbar-nav {
    float: left !important;
    margin: 0;
}
.navbar-nav>li {
    float: left;
}
.navbar-nav>li>a {
    padding-top: 15px;
    padding-bottom: 15px;
}
}

Acho que encontrei uma solução simples para alterar o ponto de interrupção do colapso, apenas através de css.

Espero que outras pessoas possam confirmá-lo, pois não o testei completamente e não tenho certeza se existem efeitos colaterais nessa solução.

Você precisa alterar os valores da consulta de mídia para as seguintes definições de classe:

@media (min-width: BREAKPOINT px ){
    .navbar-toggle{display:none}
}

@media (min-width: BREAKPOINT px){
    .navbar-collapse{
        width:auto;
        border-top:0;box-shadow:none
    }
    .navbar-collapse.collapse{
        display:block!important;height:auto!important;padding-bottom:0;overflow:visible!important
    }
    .navbar-collapse.in{
        overflow-y:visible
   }
   .navbar-fixed-top .navbar-collapse,.navbar-static-top .navbar-collapse,.navbar-fixed-bottom .navbar-collapse{
        padding-left:0;padding-right:0
    }
}

Foi isso que funcionou para mim no meu projeto atual, mas ainda preciso alterar algumas definições de css para organizar o menu corretamente para todos os tamanhos de tela.

Espero que isto ajude.