twitter-bootstrap - template - navbar responsive bootstrap

Bootstrap 3 Navbar Collapse

Question

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

¡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 corte de la barra de navegación de respuesta predeterminado

Answer 1

Creo que encontré una solución simple para cambiar el punto de quiebre 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 que esta solución tenga 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 me funcionó 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.

Answer 2

Estos son controlados en variables, no hay necesidad de muck alrededor en la fuente. con bootstrap, intente primero las variables, luego las anulaciones. luego vuelve y prueba las variables otra vez;)

Usé bootstrap-sass con rieles, pero es lo mismo con el MENOR 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

Answer 3

Estoy preocupado por los problemas de mantenimiento y actualización en el camino desde la personalización de Bootstrap. Puedo documentar los pasos de personalización hoy y espero que la persona que actualice Bootstrap dentro de tres años a partir de ahora encuentre la documentación y vuelva a aplicar los pasos (que pueden o no funcionar en ese momento). Se puede hacer un argumento de cualquier manera, supongo, pero prefiero mantener cualquier personalización en mi código.

Sin embargo, no entiendo bien 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 a 1200 en lugar de 768, las reglas de ambas consultas de medios deben anularse para evitar la expansión a 768 y forzar la expansión a 1200.

Tengo un menú más largo que se ajustaría al iPad en modo vertical. Lo siguiente mantiene el menú contraído 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; }
}

Answer 4

Gracias a Seb33300 conseguí este trabajo. Sin embargo, una parte importante parece faltar. Al menos en la versión 3.1.1 de Bootstrap.

Mi problema fue que la barra de navegación se colapsó en consecuencia en 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 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;
    }
}

Answer 5

Hice el modo CSS con mi instalación de Bootstrap 3.0.0, ya que no estoy tan familiarizado con MENOS. Aquí está el código que agregué a mi archivo css personalizado (que cargo después de bootstrap.css) que me permitió controlarlo, por lo que el menú siempre funcionaba como un accordion .
Nota: envolví mi navbar completa dentro de un div con la sidebar la clase para separar el comportamiento que quería para que no afectara a otras barras de navegación en mi sitio, como el menú principal. Ajuste 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 en la navbar menú principal (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 ajustó:

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

dentro:

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

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

Answer 6

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

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 manera predeterminada y "se expande" cuando alcanza un cierto tamaño mínimo.

El sitio de Bootstrap 3 en realidad tiene una "sugerencia" 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 deba cambiar el punto en el que la barra de navegación cambia entre el modo plegado y el modo 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 archivo variables.less . 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 desea mantener el colapso un poco más largo, puede ajustarlo de la siguiente manera:

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

o expandir antes

@grid-float-breakpoint: @screen-phone (480px break-point)

Si desea expandirlo más tarde y no tratar de volver a compilar el MENOR, tendrá que sobrescribir los estilos que se aplican en la consulta de medios de 768px y hacer que vuelvan al valor anterior. Luego re-agregarlos en el momento apropiado.

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

Recompilar el MENOR hará toda esa magia por ti solo cambiando la variable. Que es más o menos el punto de los pre-compiladores LESS / SASS. =)

(nota, los busqué todos, son alrededor de 100 líneas de código, lo cual es lo suficientemente molesto para que abandone la idea y simplemente vuelva a compilar Bootstrap para un proyecto determinado y evite desordenar algo por accidente)

¡Espero que eso ayude!

¡Aclamaciones!

Answer 7

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

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

Answer 8

Quería votar y comentar sobre la respuesta de jmbertucci, pero todavía no me han confiado los controles. Tuve el mismo problema y lo resolví como dijo. Si está utilizando Bootstrap 3.0, edite las variables MENOS en variables.less Los puntos de corte 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 utilizando la variable @ grid-float-breakpoint en aproximadamente la línea 232. De forma predeterminada, se establece en @ screen-tablet . Si lo desea, puede usar un valor de píxel, pero prefiero usar las variables MENOS.

Answer 9

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

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

2) Reduciendo el relleno entre los elementos del menú, de esta manera:

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

El relleno predeterminado es 15px en ambos lados (izquierdo y derecho).

Si prefieres cambiar cada lado, utiliza:

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

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

Esto no responde a la pregunta, pero podría ayudar a otras personas que no quieran meterse con el CSS o usar las variables LESS. Los dos enfoques comunes para resolver este problema.

Answer 10

Tuve el mismo problema hoy.

Bootstrap 4

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

.navbar-expand{-sm|-md|-lg|-xl} usar las .navbar-expand{-sm|-md|-lg|-xl} :

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

Simplemente cambie 991px por 1199px para tamaños md .

Demo

Answer 11

Y para aquellos que quieren colapsar a un ancho menor que el estándar de 768 píxeles (expandirse a un ancho menor a 768 píxeles), 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;
}
}

Answer 12

La forma más sencilla es personalizar bootstrap.

encontrar variable:

 @grid-float-breakpoint

que se establece en @ screen-sm, puede cambiarlo de acuerdo con sus necesidades. ¡Espero eso ayude!