Bootstrap 3 Colapso de la barra de navegación

202

¿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

timhc22
fuente
¿Por qué no son aplicables?
PW Kad
me pareció que el código en sí mismo había cambiado bastante
timhc22
No te sigo del todo. ¿El código CSS que quieres decir? Las clases deberían ser generalmente las mismas con algunos ajustes menores
PW Kad
no se preocupe Creo que me estaba confundiendo debido a las descargas personalizadas (una de las respuestas publiqué un enlace para especificar un número de línea específico para editar)
timhc22
stackoverflow.com/a/23536146/563309 - trabajó para mí, ayudará a alguien ...
JenonD

Respuestas:

335

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

Seb33300
fuente
21
Tuve que agregar .navbar-collapse.collapse.in { display: block!important; }para evitar que desaparezca. Buen trabajo sin embargo, me ahorró horas
Dave Forber
2
Gran alternativa, pero tuve que agregar .navbar-collapse.collapse.in {display: block! Important; margen superior: 0px; }
Mavis
44
Lo que me gusta de esto es que si actualizo Bootstrap, no necesito preocuparme por encontrar la variable y volver a compilarla.
ScubaSteve
66
pero los menús desplegables todavía estaban en modo de escritorio, tuve que editar el código en la línea 3934 para max-with: 992 (en bootstrap.css), estoy usando bootstrap 3.2. Por si alguien necesita esto.
chandan
44
Esto no parece manejar dropdown-menuelementos en la barra de navegación.
alexw
142

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!

jmbertucci
fuente
¿Cuál es la diferencia entre las versiones predeterminadas y personalizadas de bootstrap? Sus estructuras de carpetas son bastante diferentes y la versión personalizada tiene solo los archivos CSS y JS, ya que la versión predeterminada tiene muchas carpetas, incluyendo MENOS. Estoy un poco confundido.
Rahul Patwa
1
@RahulPatwa Si descarga el Zip Zip Bootstrap 3 completo, obtendrá todos los archivos de desarrollo junto con él. Estos son los archivos que las personas usan para continuar desarrollando Bootstrap e incluyen cosas como los archivos de trabajo Composer y Grunt, archivos de sistema git, los archivos MENOS, etc. Los archivos completos se encuentran en la carpeta / dist. Verá carpetas para /css, /js, /fonts. Personalizarlo solo proporciona los archivos compilados que seleccionó.
jmbertucci
así que si descargo el bootstrap completo y luego hago algunos cambios en menos variables ... ¿Cómo compilo eso en el archivo CSS?
Rahul Patwa
2
@RahulPatwa Hay varias formas de compilar MENOS. El sitio web MENOS explica cómo desde un método del lado del cliente y del servidor. Crunch es una GUI simple que puedes usar. El sitio web de Bootstrap recomienda específicamente usar su herramienta RECESS . Y hay más .
jmbertucci
9
La forma más fácil es ir a getbootstrap.com/customize redefinir el valor de @ @ grid-float-breakpoint para algo codificado (por ejemplo, 520 px) o para un tamaño de pantalla más pequeño como \ @ screen-xs-min
neves
34

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!

mshahbazm
fuente
2
Establecer esto en un valor muy pequeño, por ejemplo, 1px deshabilitará el colapso de la barra de navegación (por ejemplo, si desea una barra de navegación que no responda).
Gregor Slavec
También configuré esto en '@ screen-xs-min' para limitar el menú contraído a 480px. Para algunos sitios, esto funciona bien y crea un efecto agradable en el que puede cambiar fácilmente de un menú completo a uno colapsado en el iPhone cambiando la orientación.
chiappa
20

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

Doug Lee
fuente
1
Muy limpio. Gran solución Gracias.
Jedidiah hirió el
10

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;
    }
}
Daniel
fuente
solución css estándar perfecta para bootstrap 3.3.6, ¡gracias!
xxxbence
7

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.

Bastardo Sucio
fuente
tenga en cuenta que los tamaños ahora están en desuso, y todo lo que queda son -minlos siguientes: @ screen-md-min: 800px; @ screen-lg-min: 1200px; @ grid-float-breakpoint: @ screen-md-min;
Doug Lee
6

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.

PepitoSolis
fuente
3

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í:

ingrese la descripción de la imagen aquí

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.

Bass Jobsen
fuente
¿Cómo se usa el lápiz? ¿Utiliza github.com/Acquisio/bootstrap-stylus . En el último caso, debe hacer lo mismo que arriba. Descargue bootstrap-styles, cambie la configuración en stylus / variables.styl, etc. y vuelva a compilar.
Bass Jobsen
3

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; }
}
cdonner
fuente
1

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.

Markus
fuente
0

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;
}
}
día de Tony
fuente
0

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.

Cosmin
fuente