Cómo cambiar el punto de interrupción del colapso de la barra de navegación de Bootstrap

Actualmente, cuando el ancho del navegador cae por debajo de 768 px, la barra de navegación cambia al modo contraído. Quiero cambiar este ancho a 1000 px para que cuando el navegador esté por debajo de 1000 px, la barra de navegación cambie al modo contraído. Quiero hacer esto sin usar MENOS, estoy usando un lápiz óptico, no MENOS.

Mi problema es el mismo que en esta pregunta: Bootstrap 3 Navbar Collapse

Pero todas las respuestas a esas preguntas explican cómo hacerlo cambiando MENOS variable. No he estado lidiando con MENOS, estoy usando un lápiz óptico, así que quiero saber cómo se puede hacer esto usando un lápiz óptico u otro método.

¡Gracias!

Nov 07 '13 10:11 Nearpoint

Bootstrap 5 (actualización 2023)

Como se indica en los documentos ,

Para barras de navegación que nunca colapsan, agregue la .navbar-expandclase en la barra de navegación. Para las barras de navegación que siempre colapsan, no agregue ninguna .navbar-expandclase.

Bootstrap 4 (actualización 2018)

Cambiar el punto de interrupción de la barra de navegación es más fácil en Bootstrap 4 usando las navbar-expand-*clases:

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

navbar-expand-sm= menú móvil en pantallas xs <576px
navbar-expand-md= menú móvil en pantallas sm <768px
navbar-expand-lg= menú móvil en pantallas md <992px
navbar-expand-xl= menú móvil en pantallas lg <1200px
navbar-expand= nunca usar el menú móvil
(no expand class)= usar siempre el menú móvil

Si excluye navbar-expand-*el menú móvil se utilizará en allanchos. Aquí hay una demostración de los 6 estados de la barra de navegación: Ejemplo de barra de navegación Bootstrap 4

También puedes usar un punto de interrupción personalizado (???px) agregando un poco de CSS. Por ejemplo, aquí hay 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 Punto de interrupción de la barra de navegación personalizada
Bootstrap 4 Ejemplos de puntos de interrupción de la barra de navegación

Arranque 3

Para Bootstrap 3.3.x, aquí está el CSS funcional para anular el punto de interrupción de la barra de navegación. Cambie 991pxa la dimensión en píxeles del punto en el que desea que se colapse la barra de navegación...

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

Ejemplo de trabajo para 991px: https://codeply.com/p/GxWMLj14VJ
Ejemplo de trabajo para 1200px: https://codeply.com/go/VsYaOLzfb4 (con formulario de búsqueda)

Nota: Lo anterior funciona para cualquier tamaño superior a 768 px . Si necesita cambiarlo a menos de 768 px, el ejemplo de menos de 768 px está aquí .

Mar 29 '2016 16:03 Carol Skelly

Tienes que escribir una consulta de medios específica para esto, según tu pregunta, por debajo de 768 px, la barra de navegación colapsará, así que aplícala por encima de 768 px y por debajo de 1000 px, así como así:

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

Esto ocultará el colapso de la barra de navegación hasta que aparezca de forma predeterminada la unidad de arranque. A medida que la clase de colapso invierte, los activos internos dentro del colapso de la barra de navegación se ocultarán automáticamente, de la misma manera, debe configurar su CSS como desee.

Nov 07 '2013 05:11 SaurabhLP

en bootstrap3 , cambie esta variable @ grid-float-breakpoint a la que necesite. El valor predeterminado es 768px.

Mar 05 '2015 02:03 fengd

Finalmente descubrí cómo cambiar el ancho de colapso jugando con '@grid-float-breakpoint' en http://getbootstrap.com/customize/ .

Vaya a la línea 2923 en bootstrap.css (también versión mínima) y cambie @media screen and (min-width: 768px) {a@media screen and (min-width: 1000px) {

Entonces el código terminará siendo:

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

Mar 19 '2014 06:03 Stephen