Alterar bootstrap navbar colapso ponto de interrupção, sem a utilização de MENOS

StackOverflow https://stackoverflow.com/questions/19827605

Pergunta

Atualmente, quando o navegador largura cai abaixo de 768px, a navbar alterações para recolhido modo.Eu quero mudar esta largura 1000px assim, quando o browser estiver abaixo de 1000px a navbar alterações para recolhido modo.Eu quero fazer isso sem o uso de MENOS, eu estou usando a caneta e não MENOS.

O meu problema é o mesmo esta pergunta: Bootstrap 3 Navbar Colapso

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

Obrigado!

Foi útil?

Solução 2

Você tem que escrever um específico Consulta de mídia Para isso, a partir da sua pergunta, abaixo de 768px, o Navbar entrará em colapso, então aplique -o acima de 768px e abaixo de 1000px, assim: assim:

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

Isso ocultará o colapso da barra naval até que a ocorrência padrão da unidade de bootstrap. À medida que a classe de colapso vira, os ativos internos dentro do colapso da marinha serão automaticamente ocultos, como o sábio, você precisa definir seu CSS como desejou o design.

Outras dicas

Atualização de 2018

Bootstrap 4

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

<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 nas telas SM <768px
  • navbar-expand-lg = menu móvel nas telas MD <992px
  • navbar-expand-xl = menu móvel nas telas LG <1200px
  • navbar-expand = nunca use o menu móvel
  • (no expand class) = sempre use menu móvel

Se você excluir navbar-expand-* O menu móvel será usado em all larguras. Aqui está uma demonstração de todos os 6 estados de Navbar: Exemplo de bootstrap 4 Navbar

Você também pode usar um ponto de interrupção personalizado (??? PX) adicionando um pouco de CSS. Por exemplo, aqui está 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 .dropdown-menu {
        position: absolute;
    }
    .navbar-expand-custom .nav-link {
        padding-right: .5rem;
        padding-left: .5rem;
    }
    .navbar-expand-custom > .container {
        flex-wrap: nowrap;
    }
    .navbar-expand-custom .navbar-collapse {
        display: flex!important;
        flex-basis: auto;
    }
    .navbar-expand-custom .navbar-toggler {
        display: none;
    }
}

Bootstrap 4 Personalizado Ponto de interrupção da marinha
BOOTSTRAP 4 Exemplos de ponto de interrupção de Navbar

** Bootstrap 3 **

Para bootstrap 3.3.x, aqui está o trabalhando CSS para substituir o ponto de interrupção do marinho. Mudar 991px até a dimensão pixel do ponto em que você deseja que o navbar colapse ...

@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.codeple.com/go/vsyaolzfb4 (com formulário de pesquisa)

Nota: O acima funciona para qualquer coisa Mais de 768px. Se você precisar alterá -lo para Menos de 768px a Exemplo inferior a 768px está aqui.

dentro Bootstrap3, mude esta variável @Grid-Float-Breakpoint para o que você precisa. O valor padrão é 768px

Finalmente descobriu como mudar a largura do colapso, brincando com '@grid-float-breakpoint' em http://getbootstrap.com/customize/.

Vá para a linha 2923 no bootstrap.css (também versão min) 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;
  }
}

Acabei de fazer 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;
    }

}

No bootstrap 3 .less Código fonte, há uma variável definida em variables.less chamado @grid-float-breakpoint que tem o seguinte comentário útil:

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

A correspondência @grid-float-breakpoint-max O valor é definido como 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-breakpoint valor para 1000px em vez disso e reconstruir bootstrap.less em bootstrap.css:

por exemplo

@grid-float-breakpoint: 1000px;

O Sass maneira de mudar inicialização de variáveis, na verdade, é documentada no bootstrap-sass o github página.

Basta redefinir as variáveis antes de @import bootstrap:

$grid-float-breakpoint: 1000px;

@import 'bootstrap';

Além de responder @skely, para fazer menus suspensos Dentro do trabalho da barra naval, também adicione suas aulas a serem superestimadas. 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

As barras navais podem utilizar as classes .navbar-toggler, .navbar-colapso e .navbar-expand {-sm | -md | -lg | -xl} classes para alterar quando seu conteúdo entra em colapso 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 as barras navais que nunca entram em colapso, adicione a classe .navbar-expand na barra de navios. Para os barcos navais que sempre entram em colapso, não adicione nenhuma classe .navbar-expand.

Por exemplo :

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

O menu móvel está sendo exibido na tela grande.

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

No Bootstrap V4, a navegação pode ser desmoronada mais cedo ou mais tarde usando diferentes classes CSS

por exemplo:

  • NavBar-TogGlable-SM
  • NavBar-Togglable-md
  • NavBar-Togglable-lg

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

  • Hidden-sm-up
  • escondido-md-up
  • Hidden-LG-Up

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

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

Sua melhor aposta seria usar uma porta do processador CSS que você usa.

Eu sou um grande fã de Sass, então eu uso atualmente https://github.com/thomas-mcdonald/bootstrap-sass

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

Caso contrário, pesquise e substitua é seu melhor amigo na versão CSS ...

Olá, acho que você pode fazer isso usando CSS como este, você pode alterar o menu de bootstrap de 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;
    }
}

Este é o código de trabalho para mim. (Também os links de navbar suspensos)

@media (max-width: 1199px) {
  .navbar-nav {
    margin: 7.5px -15px;
 }
  .ul-links {
    display: block;
  }
  .navbar-nav>li>a {
    padding-top: 10px;
    padding-bottom: 10px;
    line-height: 20px;
  }  
  .navbar-header {
      float: none;
  }
  .navbar-left,.navbar-right {
      float: none !important;
  }
  .navbar-toggle {
      display: block;
  }

  .navbar-collapse.collapse {
      display: none!important;
      max-height: none;
  }
  .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;
  }
}

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

No Bootstrap 4, se você deseja subir demais quando o Navbar-Expand-*, expande e desmorona e mostra e esconde o hambúrguer (NavBar-Toggler), você precisa encontrar esse estilo/definição em bootstrap.css e redefini-lo em seu próprio alfabetizador de alfabetização (ou diretamente no bootstrap.css, se você for tão inclinado).

Por exemplo. Eu queria que o Navbar-Expand-LG colapse e mostrasse o Navbar-Toggler a 950px. Em 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 coloquei no meu estilo.css, depois modifiquei o tamanho para atender às minhas necessidades. No meu caso, eu queria que ele desmaie a 950px. As consultas @media devem precisar ser tamanhos diferentes (acho), então defino o contêiner max-lar para 949.98px e usei o 950px para a outra consulta @media e, portanto, o código a seguir foi anexado ao meu estilo.css. Isso não foi fácil de desembaraçar de 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%;
    }
}

Aqui meu código de trabalho usando no React com 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>

Agora é suportado no bootstrap 4.4

navbar-expand-sm
Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top