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

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.

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.

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

• Visite http://getbootstrap.com/customize/#less-variables
• Cambiar @navbarCollapseWidth en el campo de formulario
• Haga clic en "Compilar y descargar".

(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);

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.

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!

A partir de agosto de 2013, se puede encontrar una página de Bootstrap 3 "Personalizar y descargar" en http://getbootstrap.com/customize/

Con Bootstrap 3, la variable relevante es @ grid-float-breakpoint.

La siguiente página de Stack Overflow tiene detalles adicionales: Bootstrap 3 Navbar Collapse

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

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

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

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

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.

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

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 .

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>

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