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

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!

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.

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

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 .

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

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

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

}

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;

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

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

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

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

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

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

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

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/

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

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

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>

Agora é suportado no Bootstrap 4.4

navbar-expand-sm