Bootstrap 3 Colapso de la barra de navegación

¿Hay alguna forma de aumentar el punto en que la barra de navegación de bootstrap 3 se colapsa (es decir, se colapsa en un menú desplegable en tabletas verticales)?

¡Estos dos eran aplicables a Bootstrap 2 pero no ahora!

¿Cómo cambiar el umbral de colapso de la barra de navegación usando Twitter bootstrap-responsive?

Cambiar el punto de interrupción de la barra de navegación receptiva predeterminado

Tuve el mismo problema hoy.

Bootstrap 4

Es una funcionalidad nativa: https://getbootstrap.com/docs/4.0/components/navbar/#responsive-behaviors

Tienes que usar .navbar-expand{-sm|-md|-lg|-xl} clases:

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

Solo cambia 991px por 1199pxde mdtamaños.

Manifestación

La gran diferencia entre Bootstrap 2 y Bootstrap 3 es que Bootstrap 3 es "móvil primero".

Eso significa que los estilos predeterminados están diseñados para dispositivos móviles y, en el caso de las barras de navegación, significa que está "contraído" de forma predeterminada y "se expande" cuando alcanza un cierto tamaño mínimo.

El sitio de Bootstrap 3 en realidad tiene una "pista" sobre qué hacer: http://getbootstrap.com/components/#navbar

Personaliza el punto de colapso

Dependiendo del contenido en su barra de navegación, es posible que necesite cambiar el punto en el que su barra de navegación cambia entre el modo colapsado y horizontal. Personalice la variable @ grid-float-breakpoint o agregue su propia consulta de medios.

Si va a volver a compilar su MENOS, encontrará la variable MENOS anotada en el variables.lessarchivo. Actualmente está configurado para "expandir", @media (min-width: 768px)que es una "pantalla pequeña" (es decir, una tableta) según Bootstrap 3.

@grid-float-breakpoint: @screen-tablet;

Si desea mantener el colapso un poco más, puede ajustarlo así:

@grid-float-breakpoint: @screen-desktop; (Punto de ruptura de 992 px)

o ampliar antes

@grid-float-breakpoint: @screen-phone (Punto de ruptura 480px)

Si desea que se expanda más tarde, y no trate de volver a compilar LESS, deberá sobrescribir los estilos que se aplican en la 768pxconsulta de medios y hacer que vuelvan al valor anterior. Luego, vuelva a agregarlos en el momento adecuado.

No estoy seguro de si hay una mejor manera de hacerlo. Recompilar el Bootstrap LESS a sus necesidades es la mejor (más fácil) forma. De lo contrario, tendrá que encontrar todas las consultas de medios CSS que afecten a su barra de navegación, sobrescribirlas a los estilos predeterminados en el ancho de 768 px y luego volverlas a un ancho mínimo más alto.

Recompilar el LESS hará toda esa magia por ti simplemente cambiando la variable. Que es más o menos el punto de los precompiladores MENOS / SASS =)

(tenga en cuenta que los busqué todos, son alrededor de 100 líneas de código, lo cual es lo suficientemente molesto como para dejar caer la idea y simplemente volver a compilar Bootstrap para un proyecto determinado y evitar estropear algo por accidente)

¡Espero que eso ayude!

¡Salud!

La forma más fácil es personalizar bootstrap

encontrar variable:

 @grid-float-breakpoint

que está configurado en @ screen-sm, puede cambiarlo según sus necesidades. ¡Espero eso ayude!

estos están controlados en variables, no hay necesidad de muckear en la fuente. con bootstrap, primero pruebe las variables y luego las anula. luego regrese e intente las variables nuevamente;)

Utilicé bootstrap-sass con rieles, pero es lo mismo con el MENOS predeterminado.

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

¡Eso es! Esta página de referencia de variables es muy útil: https://github.com/twbs/bootstrap/blob/master/less/variables.less

Gracias a Seb33300 conseguí que esto funcionara. Sin embargo, parece faltar una parte importante. Al menos en Bootstrap versión 3.1.1.

Mi problema fue que la barra de navegación colapsó en consecuencia con el ancho correcto, pero el botón de menú no funcionó. No pude expandir y colapsar el menú.

Esto se debe a que la clase collapse.in está anulada por! Important en .navbar-collapse.collapse, y puede resolverse agregando también "collapse.in". El ejemplo de Seb33300 se completa a continuación:

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

Quería votar y comentar la respuesta de jmbertucci, pero aún no se me puede confiar con los controles. Tuve el mismo problema y lo resolví como él dijo. Si está utilizando Bootstrap 3.0, edite las variables MENOS en variables.less Los puntos de interrupción de respuesta se establecen alrededor de la línea 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);

Luego establezca el valor de colapso para la barra de navegación usando la variable @ grid-float-breakpoint en aproximadamente la línea 232. De manera predeterminada, se establece en @ screen-tablet . Si lo desea, puede usar un valor de píxel, pero prefiero usar las variables MENOS.

Si el problema que enfrenta es que el menú se divide en varias líneas , puede intentar uno de los siguientes:

1) Intente reducir la cantidad de elementos del menú o su longitud, como eliminar elementos del menú o acortar las palabras.

2) Reducir el relleno entre los elementos del menú, así:

.navbar .nav > li > a {
padding: 10px 15px 10px; /* Change here the second value for padding-left and padding right */
}

El relleno predeterminado es de 15 píxeles en ambos lados (izquierdo y derecho).

Si prefiere cambiar el uso de cada lado individual:

padding-left: 7px; 
padding-right: 8px;

Esta configuración también afecta a la lista desplegable.

Esto no responde la pregunta, pero podría ayudar a otros que no quieren meterse con el CSS o usar MENOS variables. Los dos enfoques comunes para resolver este problema.

El nabvar colapsará en dispositivos pequeños. El punto de colapso está definido por @ grid-float-breakpoint en las variables. Por defecto, esto será antes de 768px. Para pantallas por debajo del ancho de pantalla de 768 píxeles, la barra de navegación se verá así:

Es posible cambiar el @ grid-float-breakpoint en variables.less y recompilar Bootstrap. Al hacer esto, también tendrá que cambiar @ screen-xs-max en navbar.less. Deberá establecer este valor en su nuevo @ grid-float-breakpoint -1. Ver también: https://github.com/twbs/bootstrap/pull/10465 . Esto es necesario para cambiar los formularios y menús desplegables de la barra de navegación en @ grid-float-breakpoint a su versión móvil también.

Me preocupan los problemas de mantenimiento y actualización en el futuro al personalizar Bootstrap. Puedo documentar los pasos de personalización hoy y espero que la persona que actualice Bootstrap dentro de tres años encuentre la documentación y vuelva a aplicar los pasos (que pueden o no funcionar en ese momento). Supongo que se puede argumentar de cualquier manera, pero prefiero mantener cualquier personalización en mi código.

Sin embargo, no entiendo cómo puede funcionar el enfoque de Seb33300. Ciertamente no funcionó con Bootstrap 4.0.3. Para que la barra de navegación se expanda en 1200 en lugar de 768, las reglas para ambas consultas de medios deben ser anuladas para evitar que se expanda en 768 y forzar la expansión en 1200.

Tengo un menú más largo que se envolvería en el iPad en modo vertical. Lo siguiente mantiene el menú colapsado hasta el punto de interrupción 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; }
}

Hice la manera CSS con mi instalación de Bootstrap 3.0.0, ya que no estoy tan familiarizado con LESS. Aquí está el código que agregué a mi archivo css personalizado (que cargo después de bootstrap.css) que me permitió controlar para que el menú siempre funcionara como un accordion.
Nota: envolví todo navbardentro de un div con la clase sidebarpara separar el comportamiento que quería para que no afectara a otras barras de navegación en mi sitio, como el menú principal. Ajústese a lo largo de sus necesidades, espero que sea de ayuda.

/* 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: También agregué un cambio a la alternancia del menú principal navbar(ya que el código anterior en mi sitio se usa para un "submenú" en el lateral.

Cambié:

<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">

dentro:

<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse-topmenu">

Y luego también ajustado:

<div class="navbar-collapse collapse navbar-collapse">

dentro:

<div class="navbar-collapse collapse navbar-collapse-topmenu">

Si solo tiene uno navbar, supongo que no tendrá que preocuparse por esto, pero me ayudó en mi caso.

Y para aquellos que quieran colapsar a un ancho inferior al estándar de 768 px (expandir a un ancho inferior a 768 px), este es el CSS necesario:

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

Creo que encontré una solución simple para cambiar el punto de interrupción del colapso, solo a través de css.

Espero que otros puedan confirmarlo, ya que no lo probé a fondo y no estoy seguro de si esta solución tiene efectos secundarios.

Debe cambiar los valores de consulta de medios para las siguientes definiciones de clase:

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

Esto es lo que funcionó para mí en mi proyecto actual, pero aún necesito cambiar algunas definiciones de CSS para organizar el menú correctamente para todos los tamaños de pantalla.

Espero que esto ayude.