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

94

Estoy usando Twitter Bootstrap 2.0.1 en un proyecto Rails 3.1.2, implementado con bootstrap-sass. Estoy cargando bootstrap.csslos bootstrap-responsive.cssarchivos y, así como el bootstrap-collapse.jsJavascript.

Tengo un diseño fluido con una barra de navegación similar al ejemplo . Esto sigue las instrucciones de "variación receptiva" de la barra de navegación aquí . Funciona bien: si la página es más estrecha que unos 940 px, la barra de navegación se colapsa y muestra un "botón" en el que puedo hacer clic para expandir.

Sin embargo, mi barra de navegación se ve bien hasta unos 550px de ancho, es decir, no es necesario contraerla a menos que la pantalla sea muy estrecha.

¿Cómo le digo a Bootstrap que solo colapse la barra de navegación si la pantalla tiene menos de 550px de ancho?

Tenga en cuenta que en este punto no quiero modificar los otros comportamientos de respuesta, por ejemplo, apilar elementos en lugar de mostrarlos uno al lado del otro.

Mark Berry
fuente
¡Gran pregunta! A partir de la información que proporcionó en su pregunta, pude implementar una barra de navegación plegable desde cero. ¡Gracias!
methodMan

Respuestas:

41

Busca la línea 239 de bootstrap-responsive.css

@media (max-width: 979px) {...}

Donde el max-widthvalor activa la navegación receptiva. Cámbielo a 550px más o menos y debería cambiar de tamaño bien.

metodofaccion
fuente
12
Gracias. bootstrap-responsive.cssestá enterrado en la joya bootstrap-sass. Sí, podría editarlo, pero luego, cuando se actualice la gema, tendría que hacerlo de nuevo. ¿Hay alguna forma de anular la consulta @media, similar a anular otros elementos CSS?
Mark Berry
No puedo pensar en ninguna forma de lograr la anulación sin volver a establecer todas las declaraciones de CSS.
método de acción
Bien gracias. Probé este enfoque, anulando esa línea en el código de la gema, y ​​funciona un poco, pero obtengo un relleno horizontal adicional en la barra de navegación por debajo de 767px de ancho, presumiblemente debido al CSS en el @media (max-width: 767px)bloque. Parece que tendré que hacer una anulación más extensa como se sugiere en la respuesta de Andres Ilich.
Mark Berry
2
Como mencioné en mi comentario sobre la respuesta de @Andres Ilich, la actualización directa del código fuente parece ser el menor de los dos males cuando se trata de mantenibilidad, por lo que aceptaré esta solución por ahora. Puedo vivir con 767px como umbral mínimo, aunque probablemente podría reducirlo aún más creando un contenedor personalizado para la barra de navegación que no se vio afectado por @media (max-width: 767px). Con suerte, Bootstrap (o bootstrap-sass) algún día incluirá un medio para usar variables para establecer los umbrales, pero creo que eso requerirá interpolación en los selectores de medios .
Mark Berry
1
El CSS de anulación del punto de interrupción de la barra de navegación ha cambiado para Bootstrap 3: aquí hay un ejemplo de trabajo para 3.1: bootply.com/120604
Zim
73

Bootstrap> 2.1 && <3

  • Use la versión menos de bootstrap
  • Cambie la variable @navbarCollapseWidth en variables.less
  • Vuelva a compilar.

Actualización 2013: la forma más fácil

(THX a Archonic por comentario)

Actualización 2014: Bootstrap 3.1.1 y 3.2 (incluso lo agregaron a la documentación )

Si está personalizando o anulando / editando .lessvariables, está buscando:

//** Point at which the navbar becomes uncollapsed.
@grid-float-breakpoint:     @screen-sm-min;
//** Point at which the navbar begins collapsing.
@grid-float-breakpoint-max: (@grid-float-breakpoint - 1);
Bijan
fuente
6
Puede visitar twitter.github.com/bootstrap/customize.html#variables y cambiar el ancho y descargar. No es necesario compilar.
Archonic
Se actualizó el enlace y el texto del botón: getbootstrap.com/customize/#less-variables & "Compile and Download"
digitalextremist
Esto también funciona con la gema twitter-bootstrap-rails si pones algo como @navbarCollapseWidth: 600px;boostrap_and_overrides.css.less.
sffc
Esto parece no ser más una cosa en Bootstrap 3. :(
CodingWithSpike
¿Qué pasa con Bootstrap 4?
Aaron Franke
11

Puede establecer una nueva @mediaconsulta para soltar los elementos de la barra de navegación hacia abajo como mejor le parezca, todo lo que tiene que hacer es restablecer la primera para acomodar su nueva consulta con el ancho de colocación deseado. Toma esto por ejemplo:

CSS

/** Modified Responsive CSS **/

@media (max-width: 979px) {
    .btn-navbar {
        display: none;
    }
    .navbar .nav-collapse {
        clear: none;
    }

    .nav-collapse {
        height: auto;
        overflow: auto;
    }

    .navbar .nav {
        float: left;
        margin: 0 10px 0 0;
    }

    .navbar .brand {
        margin-left: -20px;
        padding: 8px 20px 12px;
    }

    .navbar .dropdown-menu:before, .navbar .dropdown-menu:after {
        display: block;
    }

    .navbar .nav > li > a, .navbar .dropdown-menu a {
        border-radius: 0;
        color: #999999;
        font-weight: normal;
        padding: 10px 10px 11px;
    }

    .navbar .nav > li {
        float: left;
    }

    .navbar .dropdown-menu {
        background-clip: padding-box;
        background-color: #FFFFFF;
        border-color: rgba(0, 0, 0, 0.2);
        border-radius: 0 0 5px 5px;
        border-style: solid;
        border-width: 1px;
        box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
        display: none;
        float: left;
        left: 0;
        list-style: none outside none;
        margin: 0;
        min-width: 160px;
        padding: 4px 0;
        position: absolute;
        top: 100%;
        z-index: 1000;
    }

    .navbar-form, .navbar-search {
        border:none;
        box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1) inset, 0 1px 0 rgba(255, 255, 255, 0.1);
        float: left;
        margin-bottom: 0;
        margin-top:6px;
        padding: 9px 15px;
    }

    .navbar .nav.pull-right {
        float: right;
        margin-left: auto;
    }
}

@media (max-width: 550px) {
    .btn-navbar {
        display: block;
    }
    .navbar .nav-collapse {
        clear: left;
    }

    .nav-collapse {
        height: 0;
        overflow: hidden;
    }

    .navbar .nav {
        float: none;
        margin: 0 0 9px;
    }

    .navbar .brand {
        margin: 0 0 0 -5px;
        padding-left: 10px;
        padding-right: 10px;
    }

    .navbar .dropdown-menu:before, .navbar .dropdown-menu:after {
        display: none;
    }

    .navbar .nav > li > a, .navbar .dropdown-menu a {
        border-radius: 3px 3px 3px 3px;
        color: #999999;
        font-weight: bold;
        padding: 6px 15px;
    }

    .navbar .nav > li {
        float: none;
    }

    .navbar .dropdown-menu {
        background-color: transparent;
        border: medium none;
        border-radius: 0 0 0 0;
        box-shadow: none;
        display: block;
        float: none;
        left: auto;
        margin: 0 15px;
        max-width: none;
        padding: 0;
        position: static;
        top: auto;
    }

    .navbar-form, .navbar-search {
        border-bottom: 1px solid #222222;
        border-top: 1px solid #222222;
        box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1) inset, 0 1px 0 rgba(255, 255, 255, 0.1);
        float: none;
        margin: 9px 0;
        padding: 9px 15px;
    }

    .navbar .nav.pull-right {
        float: none;
        margin-left: 0;
    }

}

En el siguiente código, puede ver cómo incluí la @mediaconsulta original que maneja la colocación antes de la 979pxmarca y la nueva consulta para respaldar el punto de colocación deseado de 550px. Modifiqué la consulta original directamente desde el CSS que responde a bootstrap para restablecer todos los estilos aplicados a esa consulta específica para los elementos de la barra de navegación y los porté a la nueva consulta que lleva el punto de caída que necesita. De esta manera, podemos conmutar todos los estilos de la consulta original a la nueva consulta sin perder el tiempo en la hoja de estilo que responde a bootstrap, de esta manera los valores predeterminados se seguirán aplicando a los demás elementos de su documento.

Aquí hay una breve demostración con una consulta de medios configurada para realizar 550pxsegún lo necesite: http://jsfiddle.net/wU8MW/

Nota: coloqué las @mediaconsultas modificadas anteriores muy por debajo del marco css, ya que se supone que el nuevo css modificado se carga primero que el css sensible.

Andrés Ilich
fuente
Gracias por su respuesta detallada. Parece funcionar, todavía estoy tratando de averiguar cómo. Si le entiendo correctamente, (1) clonó la @media (max-width: 979px)consulta original para realizar la nueva @media (max-width: 550px)consulta. Luego (2) codificó a mano una nueva consulta de 979px para anular los efectos de la consulta de 979px en la página principal bootstrap-responsive.css. La secuencia de etiquetas en su CSS no parece seguir la secuencia en bootstrap-responsive.css, así que tengo dificultades para compararlas para ver lo que hizo.
Mark Berry
@MarkBerry Estás en el camino correcto. La @media (max-width: 550px)consulta que escribí no sigue la @media (max-width: 979px)sintaxis de las consultas iniciales porque todo lo que hice fue un ejemplo rápido anulándola a mano a través de firebug y copiar / pegar, me volví perezoso en eso, pero la forma correcta de hacerlo es como mencionaste en tu segundo punto.
Andres Ilich
1
Esta es una decisión difícil cuando se trata de mantenibilidad. Me temo que este tipo de anulación extensiva, si bien proporciona un control absoluto, significaría muchas comprobaciones manuales después de cada actualización de Bootstrap frente a la actualización directa de una o dos líneas de código fuente según la sugerencia de @Duopixel. Estoy usando Bootstrap, en parte, porque soy no un genio de CSS, así que creo que voy a ir con la solución más simple por ahora.
Mark Berry
6

bootstrap-sass admitirá la variable $ navbarCollapseWidth en la próxima versión (2.2.1.0). ¡Podrás actualizarlo para hacer exactamente lo que quieras una vez que la versión esté activa!

trisweb
fuente
¿Podría explicar dónde puso esta variable?
Andy Hayden
Antes de cualquier importación de Bootstrap, por ejemplo@import "bootstrap";
Ashley
4

Sospecho (y espero) que esto se implemente de manera oficial pronto. Mientras tanto, solo estoy haciendo un simple truco css, usando visible-phone en el botón desplegable y visible-tablet en un segundo conjunto de botones que coloqué en la barra de navegación. Entonces, antes se veía así:

<div class="navbar navbar-fixed-top">
  <div class="navbar-inner">
    <div class="container-fluid">
      <a href="<%= root_url %>" class="brand brandtag"></a>
      <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </a>
      <div class="nav-collapse">
        <ul class="nav">
          <li>Navigation 1</li>
          <li>Navigation 2</li>
          <li>Navigation 3</li>
        </ul>
      </div>
    </div>
  </div>
</div>

Y ahora se ve así:

<div class="navbar navbar-fixed-top">
  <div class="navbar-inner">
    <div class="container-fluid">
      <a href="<%= root_url %>" class="brand brandtag"></a>
      <a class="btn btn-navbar visible-phone" data-toggle="collapse" data-target=".nav-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </a>
      <div class="visible-tablet">
        <ul class="nav">
          <li>Navigation 1</li>
          <li>Navigation 2</li>
          <li>Navigation 3</li>
        </ul>
      </div>
      <div class="nav-collapse">
        <ul class="nav">
          <li>Navigation 1</li>
          <li>Navigation 2</li>
          <li>Navigation 3</li>
        </ul>
      </div>
    </div>
  </div>
</div>

Tenga en cuenta que el orden de los elementos es importante; de ​​lo contrario, puede tener problemas con los elementos que pasan a la siguiente línea

Tyler
fuente
3

Creé un archivo SCSS separado que enumeraba todos los parciales que necesita bootstrap, de esa manera puedo activar y desactivar los parciales según lo que necesite nuestro sitio. De esta manera, puedo anular la variable de punto de interrupción fácilmente. Esto es lo que tengo:

// Core variables and mixins
$grid-float-breakpoint: 991px;
@import "bootstrap/variables";
@import "bootstrap/mixins";

// Reset
@import "bootstrap/normalize";
//@import "bootstrap/print";

// Core CSS
@import "bootstrap/scaffolding";
@import "bootstrap/type";
//@import "bootstrap/code";
@import "bootstrap/grid";
@import "bootstrap/tables";
@import "bootstrap/forms";
@import "bootstrap/buttons";

// Components
@import "bootstrap/component-animations";
@import "bootstrap/glyphicons";
@import "bootstrap/dropdowns";
//@import "bootstrap/button-groups";
//@import "bootstrap/input-groups";
@import "bootstrap/navs";
@import "bootstrap/navbar";
@import "bootstrap/breadcrumbs";
@import "bootstrap/pagination";
@import "bootstrap/pager";
@import "bootstrap/labels";
@import "bootstrap/badges";
//@import "bootstrap/jumbotron";
//@import "bootstrap/thumbnails";
@import "bootstrap/alerts";
//@import "bootstrap/progress-bars";
//@import "bootstrap/media";
//@import "bootstrap/list-group";
@import "bootstrap/panels";
//@import "bootstrap/wells";
@import "bootstrap/close";

// Components w/ JavaScript
@import "bootstrap/modals";
@import "bootstrap/tooltip";
//@import "bootstrap/popovers";
//@import "bootstrap/carousel";

// Utility classes
@import "bootstrap/utilities";
@import "bootstrap/responsive-utilities";
mae
fuente
2

Aquí está mi código (todas las demás soluciones mostraban una barra de desplazamiento funky cuando la barra de navegación se desplegaba, así que edité el código para que no fuera así). No pude publicar otra respuesta, así que lo haré aquí para que otros la encuentren. Estoy usando rieles para hacer esto con Bootstrap 3.0.

assets / stylesheets / framework y overrides pegue esto: (Ajuste el ancho máximo a cualquier valor para lograr su objetivo).

@media (max-width: 2500px) {
.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;
}
.navbar-nav>li {
    float: none;
}
.navbar-nav>li>a {
    padding-top: 10px;
    padding-bottom: 10px;
}
pirata694
fuente
1

Bootstrap 3.x

con MENOS , puede cambiar el valor de @screen-smallpara apuntar a su tamaño mínimo

ejemplo: @screen-small: 600px;

Lo uso para cambiar al modo "dispositivo pequeño" solo cuando el ancho es inferior a 600 px

JasonS
fuente
¿Sabes cómo hacer esto con SCSS?
bcackerman
lo siento, no lo hago. Pensé que bootstrap se desarrolló usando LESS, por lo que es posible que deba hacerlo de la manera .css (consulte las respuestas de bootstrap 2 arriba)
JasonS
1

Bootstrap 3.x

usando SASS, puede cambiar el valor de $ screen-sm para apuntar a su tamaño mínimo

ejemplo: $ screen-sm: 600px;

Necesita poner este valor en su archivo application.scss antes de @import "bootstrap";

$screen-sm:600px;
@import "bootstrap";

Menos variables comienzan con "@" simplemente las cambia a "$" para anularlas antes de la importación.

Aquí está la lista de variables.

codificación adicto
fuente
Esto rompe la funcionalidad
blnc
1

Bootstrap 4.x

Es muy fácil cambiar el umbral de colapso en Bootstrap 4.x. Hay 6 casos:

  1. Expandir siempre, nunca contraer (es decir, el punto de interrupción es 0px): <nav class="navbar navbar-expand">...</nav>
  2. El punto de interrupción es sm (576px):<nav class="navbar navbar-expand-sm">...</nav>
  3. El punto de interrupción es md (768px):<nav class="navbar navbar-expand-md">...</nav>
  4. El punto de interrupción es lg (992px):<nav class="navbar navbar-expand-lg">...</nav>
  5. El punto de interrupción es xl (1200px):<nav class="navbar navbar-expand-xl">.../nav>
  6. Colapsar siempre, nunca expandir (es decir, el punto de interrupción es ∞px). : <nav class="navbar">...</nav>(Simplemente elimine la navbar-expand-*clase. Mobile-first como en Bootstrap 4.x)

Crédito a este artículo de Carol Skelly encontré https://medium.com/wdstack/examples-bootstrap-4-navbar-b3c9dc0edc1a

Jinhr
fuente
0

Este es un gran ejemplo de dónde podría estar usando la versión MENOS de los archivos CSS Bootstrap. Cómo hacer esto se encuentra a continuación.

Aún mejor sería enviar esto como una solicitud de extracción en Github para que todos puedan beneficiarse y su "código personalizado" sea parte de Bootstrap en el futuro.

  • Agregue una variable variables.lessque especifique cuándo contraer la barra de navegación. Algo como:@navCollapseWidth: 979px
  • Luego modifique responsive-navbar.less...
    • Arriba cambiar @media (max-width: 979px)a@media (max-width: @navCollapseWidth)
    • En la parte inferior cambia @media (min-width: 980px)a@media (max-width: @navCollapseWidth - 1)

Por supuesto ... tendrías que compilar MENOS usando uno de los métodos sugeridos .

Jason Capriotti
fuente
Aparentemente, Bootstrap 2.0.4 ha cambiado la estructura de archivos para las cosas sensibles. Vea el comentario del autor de bootstrap-sass @Thomas McDonald. No he profundizado en esto todavía, pero puede permitir una modificación más fácil del umbral incluso con la versión SASS.
Mark Berry
Lo siento; Me perdí por completo el comentario de Sass en la pregunta ... Solo estaba enfocado en Bootstrap basado en la categoría. Sin embargo, la estructura del archivo se ve igual que lo que estaba viendo en Bootstrap ... de cualquier manera actualizaré mi respuesta para responder a la pregunta.
Jason Capriotti
Sin preocupaciones. Y estoy completamente de acuerdo en que la mejor solución sería que bootstrap ofrezca de forma nativa una variable o serie de variables que controlen los umbrales de colapso de la barra de navegación. No tengo suficiente experiencia con CSS, LESS o SASS, o consultas de medios para ser el que escriba esa mejora;).
Mark Berry
0

Llevando el truco de Tyler aún más lejos al agregar un bloque clasificado de teléfono visible y una clase de teléfono oculto a un elemento en la navegación principal plegable, puede 'sacar' uno o dos de los elementos contraídos para mostrarlos incluso en la barra de navegación del teléfono.

<div class="navbar navbar-fixed-top">
  <div class="navbar-inner">
    <div class="container-fluid">
      <a href="<%= root_url %>" class="brand brandtag"></a>
      <a class="btn btn-navbar visible-phone" data-toggle="collapse" data-target=".nav-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </a>
      <div class="visible-tablet">
        <ul class="nav">
          <li>Navigation 1</li>
          <li>Navigation 2</li>
          <li>Navigation 3</li>
        </ul>
      </div>
      <div class="visible-phone">
        <ul class="nav">
          <li>Navigation 1</li>
        </ul>
      </div>
      <div class="nav-collapse">
        <ul class="nav">
          <li class="hidden-phone">Navigation 1</li>
          <li>Navigation 2</li>
          <li>Navigation 3</li>
        </ul>
      </div>
    </div>
  </div>
</div>
althras
fuente
0

Simplemente escriba este código en su archivo style.css personalizado y funcionará

@media (min-width: 768px) and (max-width: 991px) {
        .navbar-collapse.collapse {
            display: none !important;
        }
        .navbar-collapse.collapse.in {
            display: block !important;
        }
        .navbar-header .collapse, .navbar-toggle {
            display:block !important;
        }
        .navbar-header {
            float:none;
        }
        .navbar-nav {
            float: none !important;
            margin: 0px;
        }
        .navbar-nav {
            margin: 7.5px -15px;
        }
        .nav > li {
            position: relative;
            display: block;
        }
        .navbar-nav > li {
            float: none !important;
        }
        .nav > li > a {
            position: relative;
            display: block;
            padding: 10px 15px;
        }
        .navbar-collapse {
            padding-right: 15px;
            padding-left: 15px;
            overflow-x: visible;
            border-top: 1px solid transparent;
            box-shadow: 0px 1px 0px rgba(255, 255, 255, 0.1) inset;
        }
        .nav {
            padding-left: 0px;
            margin-bottom: 0px;
            list-style: outside none none;
        }
    }
Ganpat Kakar
fuente