Barra de navegação do Bootstrap 3


202

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


Por que eles não são aplicáveis?
PW Kad

parecia-me que o próprio código tinha sido mudado um pouco
timhc22

Eu não sigo muito bem. O código CSS que você quer dizer? Classes devem ser geralmente o mesmo com alguns ajustes menores
PW Kad

Não se preocupe, eu acho que eu estava ficando confuso por causa dos downloads personalizados (uma das respostas que eu postei um link para especificado um número de linha específica para editar)
timhc22

stackoverflow.com/a/23536146/563309 - trabalhou para mim, vai ajudar alguém ...
JenonD

Respostas:


335

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


21
Teve que adicionar .navbar-collapse.collapse.in { display: block!important; }para impedir que desapareça. Bom trabalho, porém, me salvou horas.
Dave Forber

2
Ótima alternativa, mas tinha que adicionar .navbar-collapse.collapse.in {display: block! Important; margem superior: 0 px; }
Mavis

4
O que eu gosto sobre isso é que, se eu atualizar o Bootstrap, não preciso me preocupar em encontrar a variável e recompilá-la.
ScubaSteve

6
mas os menus suspensos ainda estavam no modo de área de trabalho, tive que editar o código na linha 3934 para max-with: 992 (em bootstrap.css), estou usando o bootstrap 3.2. Apenas no caso de alguém precisar disso.
chandan

4
Isso não parece lidar com dropdown-menuitens na barra de navegação.
alexw

142

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!


qual é a diferença entre as versões padrão e personalizada do bootstrap? Suas estruturas de pastas são bem diferentes e a versão personalizada possui apenas os arquivos CSS e JS, pois a versão padrão possui muitas pastas, incluindo LESS. Estou um pouco confuso.
Rahul Patwa

1
@RahulPatwa Se você baixar o Bootstrap 3 Zip completo, receberá todos os arquivos de desenvolvimento. Esses são os arquivos que as pessoas usam para continuar desenvolvendo o Bootstrap e incluem itens como arquivos de trabalho do Composer e Grunt, arquivos de sistema git, arquivos MENOS etc. Os arquivos completos estão localizados na pasta / dist. Você verá pastas para /css, /js, /fonts. A personalização apenas fornece os arquivos compilados que você selecionou.
precisa saber é o seguinte

então, se eu baixar o bootstrap completo e fizer algumas alterações em menos variáveis ​​... Como faço para compilar isso novamente no arquivo CSS?
Rahul Patwa

2
@RahulPatwa Existem várias maneiras de compilar MENOS. O site LESS explica como é o método do cliente e do servidor. Crunch é uma GUI simples que você pode usar. O site do Bootstrap recomenda especificamente o uso da ferramenta RECESS . E tem mais .
jmbertucci

9
A maneira mais fácil é acessar getbootstrap.com/customize redefinir o valor \ @ grid-float-breakpoint para algo codificado permanentemente (por exemplo, 520px) ou para um tamanho de tela menor como \ @ screen-xs-min
neves

34

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!


2
Definir isso com um valor muito pequeno, por exemplo, 1px desabilitará o recolhimento da barra de navegação (por exemplo, se você desejar uma barra de navegação não responsiva).
Gregor Slavec

Também defini isso como '@ screen-xs-min' para limitar o menu recolhido a 480px. Para alguns sites, isso funciona bem e cria um efeito agradável, onde você pode facilmente mudar de um menu completo para um recolhido no iPhone, alterando a orientação.
Chiappa 26/10/16

20

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


1
Tão limpo. Ótima solução. Obrigado.
Jedidiah Hurt

10

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

solução css padrão perfeita para bootstrap 3.3.6, obrigado!
xxxbence 9/11/16

7

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.


observe que os tamanhos agora estão obsoletos e tudo o que resta são -minos seguintes: @ screen-md-min: 800px; @ screen-lg-min: 1200px; @ ponto de interrupção de flutuação da grade: @ screen-md-min;
Doug Lee

6

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.


3

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:

insira a descrição da imagem aqui

É 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.


Como você usa a caneta? Você usa github.com/Acquisio/bootstrap-stylus . No último caso, você deve fazer o mesmo que acima. Faça o download dos estilos de inicialização, altere a configuração em stylus / variables.styl etc. e recompile.
Baixo Jobsen

3

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

1

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.


0

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

0

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.

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.