Colapso de la barra de navegación de Bootstrap 3
¿Hay alguna forma de aumentar el punto en el que se colapsa la barra de navegación de bootstrap 3 (es decir, para que se colapse 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 responsiva predeterminada
Hoy tuve el mismo problema.
Arranque 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">
Arranque 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;
}
}
Sólo cambia 991pxpor 1199pxtallas md.
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án "contraídos" de forma predeterminada y "se expanden" cuando alcanzan un tamaño mínimo determinado.
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 de su barra de navegación, es posible que necesite cambiar el punto en el que su barra de navegación cambia entre el modo contraído y el modo horizontal. Personalice la variable @grid-float-breakpoint o agregue su propia consulta de medios.
Si va a volver a compilar su LESS, encontrará la variable LESS 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 los términos de Bootstrap 3.
@grid-float-breakpoint: @screen-tablet;
Si deseas mantener el plegado un poco más de tiempo, puedes ajustarlo así:
@grid-float-breakpoint: @screen-desktop;(punto de interrupción de 992 px)
o ampliar antes
@grid-float-breakpoint: @screen-phone(punto de interrupción de 480 px)
Si desea expandirlo más adelante y no tener que volver a compilar MENOS, tendrá que 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 MENOS Bootstrap según sus necesidades es la mejor (más fácil) forma. De lo contrario, tendrá que encontrar todas las consultas de medios CSS que afectan su barra de navegación, sobrescribirlas con los estilos predeterminados con un ancho de 768 px y luego revertirlas a un ancho mínimo más alto.
Recompilar LESS hará toda esa magia por usted simplemente cambiando la variable. Que es básicamente el objetivo de los precompiladores LESS/SASS. =)
(tenga en cuenta que los busqué todos, son aproximadamente 100 líneas de código, lo cual me molesta lo suficiente como para abandonar la idea y simplemente volver a compilar Bootstrap para un proyecto determinado y evitar estropear algo por accidente)
La forma más sencilla es personalizar el bootstrap.
encontrar variables:
@grid-float-breakpoint
que está configurado en @screen-sm, puedes cambiarlo según tus necesidades. ¡Espero eso ayude!
Estos se controlan en variables, no es necesario trastear en la fuente. con bootstrap, pruebe primero las variables y luego las anula. luego regresa y prueba las variables nuevamente;)
Usé bootstrap-sass con rieles, pero es lo mismo con el valor predeterminado MENOS.
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 todo! Esta página de referencia de variables es muy útil: https://github.com/twbs/bootstrap/blob/master/less/variables.less
Gracias a Seb33300 logré que esto funcionara. Sin embargo, parece que falta una parte importante. Al menos en la versión 3.1.1 de Bootstrap.
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 contraer el menú.
Esto se debe a que la clase crash.in es anulada por !important en .navbar-collapse.collapse, y se puede resolver 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;
}
}
