Cambiar el punto de interrupción de colapso de la barra de navegación de arranque sin usar MENOS

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, de modo 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 en esas preguntas explican cómo hacerlo cambiando MENOS la variable. No he estado tratando 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!

Debe escribir una consulta de medios específica para esto, a partir de su pregunta, debajo de 768px, la barra de navegación colapsará, así que aplíquela por encima de 768px y por debajo de 1000px, así:

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

Esto ocultará el colapso de la barra de navegación hasta la aparición predeterminada de la unidad bootstrap. A medida que la clase de colapso se voltea, los activos internos dentro del colapso de la barra de navegación se ocultarán automáticamente, por lo que deberá configurar su CSS como desee.

ACTUALIZACIÓN 2018

Bootstrap 4

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 use el menú móvil
• (no expand class) = usar siempre el menú móvil

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

También puede usar un punto de interrupción personalizado (??? px) agregando un poco de CSS. Por ejemplo, aquí hay 1300 px.

@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 Punto de interrupción de barra de navegación personalizada
Bootstrap 4 Ejemplos de punto de interrupción de barra de navegación

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

@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: http://www.bootply.com/j7XJuaE5v6
Ejemplo de trabajo para 1200px: https://www.codeply.com/go/VsYaOLzfb4 (con formulario de búsqueda)

Nota: Lo anterior funciona para más de 768 px . Si necesita cambiarlo a menos de 768px, el ejemplo de menos de 768px está aquí .

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

Finalmente descubrí cómo cambiar el ancho del 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;
  }
}

Acabo de hacer esto con éxito usando el siguiente 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;
    }

}

En el código fuente Bootstrap 3. MENOS , hay una variable definida en variables.lessllamada @grid-float-breakpointque tiene el siguiente comentario útil:

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

El @grid-float-breakpoint-maxvalor de coincidencia se establece en ese menos 1px:

//**Point at which the navbar begins collapsing
@grid-float-breakpoint-max: (@grid-float-breakpoint-max - 1);

Solución:

Así que solo establezca el @grid-float-breakpointvalor en 1000px y reconstruya bootstrap.lessen bootstrap.css:

p.ej

@grid-float-breakpoint: 1000px;

La forma Sass de cambiar las variables de bootstrap está realmente documentada en la página bootstrap-sass github.

Simplemente redefina las variables antes de importar @ bootstrap:

$grid-float-breakpoint: 1000px;

@import 'bootstrap';

Además de @Skely answer, para hacer que funcionen los menús desplegables dentro de la barra de navegación, también agregue sus clases para ser anuladas. Código final a continuación:

    @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 demostración

En Bootstrap v4, la navegación puede colapsarse tarde o temprano usando diferentes clases de CSS

p.ej:

• navbar-toggleable-sm
• navbar-toggleable-md
• navbar-toggleable-lg

Con el botón para la navegación:

• escondido
• oculto-md-up
• oculto-lg-up

Para Bootstrap 3.3, este es el único código que necesita:

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

Esto funcionó para mí 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;
      }
}

Tomó un tiempo resolver estos dos:

.navbar-collapse.collapse {
   display: none!important;
}
.navbar-collapse.collapse.in {
   display: block!important;
}

Su mejor opción sería usar un puerto del procesador CSS que usa.

Soy un gran admirador de SASS, así que actualmente uso https://github.com/thomas-mcdonald/bootstrap-sass

Parece que hay un tenedor para Stylus aquí: https://github.com/Acquisio/bootstrap-stylus

De lo contrario, Buscar y reemplazar es su mejor amigo en la versión CSS ...

Hola, creo que puedes hacerlo usando CSS como este, puedes cambiar el menú de arranque del punto de interrupción

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

Las barras de navegación pueden utilizar las clases .navbar-toggler, .navbar-collapse y .navbar-expand {-sm | -md | -lg | -xl} para cambiar cuando su contenido colapsa detrás de un botón. En combinación con otras utilidades, puede elegir fácilmente cuándo mostrar u ocultar elementos particulares.

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

Por ejemplo :

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

El menú móvil se muestra en pantalla grande.

Referencia: https://getbootstrap.com/docs/4.0/components/navbar/

Esto es lo que me funcionó:

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

En Bootstrap 4, si desea anular cuando navbar-expand- *, se expande y colapsa y muestra y oculta la hamburguesa (navbar-toggler), debe encontrar ese estilo / definición en bootstrap.css y redefinirlo en su propio customstyle.css (o directamente en bootstrap.css si así lo desea).

P.ej. Quería que navbar-expand-lg colapsara y mostrara navbar-toggler a 950px. En bootstrap.css encuentro:

@media (max-width: 991.98px) {
  .navbar-expand-lg > .container,
  .navbar-expand-lg > .container-fluid {
    padding-right: 0;
    padding-left: 0;
  }
}

Y debajo de eso ...

@media (min-width:992px) { 
    ... lots of styling ...
}

Copié ambas consultas de @media y las pegué en mi style.css, luego modifiqué el tamaño para adaptarlo a mis necesidades. En mi caso, quería que colapsase a 950 px. Las consultas @media deben tener diferentes tamaños (supongo), por lo que configuré el ancho máximo del contenedor en 949.98px y usé el 950px para la otra consulta @media, por lo que el siguiente código se agregó a mi style.css. Esto no fue fácil de desenredar de soluciones retorcidas que encontré en Stackoverflow y en otros lugares. Espero que esto ayude.

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

Aquí mi código de trabajo usando 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>

Ahora es compatible con Bootstrap 4.4

navbar-expand-sm