Cambiar el punto de interrupción de colapso de la barra de navegación de arranque sin usar MENOS

205

Actualmente, cuando el ancho del navegador cae por debajo de 768 px, la barra de navegación cambia al modo contraído. Quiero cambiar este ancho a 1000 px, de modo que cuando el navegador esté por debajo de 1000 px, la barra de navegación cambie al modo contraído. Quiero hacer esto sin usar MENOS, estoy usando un lápiz óptico, NO MENOS.

Mi problema es el mismo que en esta pregunta: Bootstrap 3 Navbar Collapse

Pero todas las respuestas en esas preguntas explican cómo hacerlo cambiando MENOS la variable. No he estado tratando con MENOS, estoy usando un lápiz óptico, así que quiero saber cómo se puede hacer esto usando un lápiz óptico u otro método.

¡Gracias!

Punto cercano
fuente

Respuestas:

50

Debe escribir una consulta de medios específica para esto, a partir de su pregunta, debajo de 768px, la barra de navegación colapsará, así que aplíquela por encima de 768px y por debajo de 1000px, así:

@media (min-width: 768px) and (max-width: 1000px) {
   .collapse {
       display: none !important;
   }
}

Esto ocultará el colapso de la barra de navegación hasta la aparición predeterminada de la unidad bootstrap. A medida que la clase de colapso se voltea, los activos internos dentro del colapso de la barra de navegación se ocultarán automáticamente, por lo que deberá configurar su CSS como desee.

SaurabhLP
fuente
Actualmente, la barra de navegación se contrae cuando el ancho es inferior a 768 px. Pero quiero que la barra de navegación se contraiga cuando el ancho sea inferior a 1000 px. Para esto, ¿no necesitarías mostrar .collapse entre 768 y 1000?
Nearpoint
Sí, collapsela clase es importante para la pantalla del móvil, de modo que si la anchura está por debajo de la barra de navegación 768px será display:none, por lo que la acción requerida sería aplicada en el interior 768 y 1000 marca ...
SaurabhLP
64
esto no funciona en Bootstrap 3 porque hay otra regla navbar-collapse.collapseque sí display: block !important. Desactivar eso dará como resultado que el botón de colapso no aparezca ... así que supongo que es necesario redefinir muchas clases, no solocollapse
Daniele Ricci
42
Sí, se deben anular un montón de clases Bootstrap en la consulta de medios personalizada: bootply.com/120604
Zim
1
Jaja, ¿quién demonios construyó Bootstrap? ¿No pensamos que tendríamos que cambiar ese pequeño detalle?
MH
400

ACTUALIZACIÓN 2018

Bootstrap 4

Cambiar el punto de interrupción de la barra de navegación es más fácil en Bootstrap 4 usando las navbar-expand-*clases:

<nav class="navbar fixed-top navbar-expand-sm">..</nav>

  • navbar-expand-sm = menú móvil en pantallas xs <576px
  • navbar-expand-md = menú móvil en pantallas sm <768px
  • navbar-expand-lg = menú móvil en pantallas md <992px
  • navbar-expand-xl = menú móvil en pantallas lg <1200px
  • navbar-expand = nunca use el menú móvil
  • (no expand class) = usar siempre el menú móvil

Si excluye, navbar-expand-*el menú móvil se utilizará en allanchuras. Aquí hay una demostración de los 6 estados de la barra de navegación: Ejemplo de la barra de navegación de Bootstrap 4

También puede usar un punto de interrupción personalizado (??? px) agregando un poco de CSS. Por ejemplo, aquí hay 1300 px.

@media (min-width: 1300px){
    .navbar-expand-custom {
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: flex-start;
    }
    .navbar-expand-custom .navbar-nav {
        flex-direction: row;
    }
    .navbar-expand-custom .navbar-nav .nav-link {
        padding-right: .5rem;
        padding-left: .5rem;
    }
    .navbar-expand-custom .navbar-collapse {
        display: flex!important;
    }
    .navbar-expand-custom .navbar-toggler {
        display: none;
    }
}

Bootstrap 4 Punto de interrupción de barra de navegación personalizada
Bootstrap 4 Ejemplos de punto de interrupción de barra de navegación


Bootstrap 3

Para Bootstrap 3.3.x, aquí está el CSS de trabajo para anular el punto de interrupción de la barra de navegación. Cambie 991pxa la dimensión de píxeles del punto en el que desea que la barra de navegación se contraiga ...

@media (max-width: 991px) {
  .navbar-header {
      float: none;
  }
  .navbar-left,.navbar-right {
      float: none !important;
  }
  .navbar-toggle {
      display: block;
  }
  .navbar-collapse {
      border-top: 1px solid transparent;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
  }
  .navbar-fixed-top {
      top: 0;
      border-width: 0 0 1px;
  }
  .navbar-collapse.collapse {
      display: none!important;
  }
  .navbar-nav {
      float: none!important;
      margin-top: 7.5px;
  }
  .navbar-nav>li {
      float: none;
  }
  .navbar-nav>li>a {
      padding-top: 10px;
      padding-bottom: 10px;
  }
  .collapse.in{
      display:block !important;
  }
}

Ejemplo de trabajo para 991px: http://www.bootply.com/j7XJuaE5v6
Ejemplo de trabajo para 1200px: https://www.codeply.com/go/VsYaOLzfb4 (con formulario de búsqueda)

Nota: Lo anterior funciona para más de 768 px . Si necesita cambiarlo a menos de 768px, el ejemplo de menos de 768px está aquí .


Zim
fuente
Pruebe esta primera visita: [link] ( getbootstrap.com/customize Localice: 'Menos variables' -> 'Puntos de interrupción de consultas de medios' Cambio: @ valor de pantalla-lg de 1200px a 1920px Localice: “Sistema de cuadrícula” -> @ grid-float -breakpoint Change: @ screen-sm-min a @ screen-lg Desplácese hasta el final de la página. Haga clic en "Compilar y descargar" Extracto y use estos archivos descargados.
rpalzona
66
Este código anterior funciona cuando configuro un valor superior a 768px, sin embargo, necesito lograr lo contrario ... Solo quiero que se colapse, por ejemplo, a 400px, pero cuando configuro este valor, bootstrap parece estar recogiendo el 768 original. - ¿Algunas ideas? Gracias
Chris Richards
66
Aunque esta respuesta funciona a la perfección , pero está jugando con el menú desplegable , tal vez necesite mejorar la respuesta.
Abhishek Pandey
2
@AbhishekPandey He encontrado útil esta respuesta (parte sobre el menú desplegable)
cbuchart
1
Gracias. A diferencia de la "solución" con la marca de verificación al lado, su código realmente funciona.
Michael S. Miller
46

en bootstrap3 , cambie esta variable @ grid-float-breakpoint a la que necesita. El valor predeterminado es 768 px

fengd
fuente
17
¿Puedes publicar un ejemplo, por favor?
e.thompsy
2
Tenga en cuenta que si está usando sass y no desea reemplazar el código del proveedor (no debería), debe incluir el archivo que contiene la variable con su valor personalizado antes de los archivos sass de bootstrap. ¡La razón es que todas las variables de Bootstrap están configuradas por defecto! valores, por lo que debemos anular estos valores importando primero nuestras variables.
Makis K.
Agregue un ejemplo de cómo hacer esto ... Soy nuevo en bootstrap, y grep revela 0 instancias de esta variable en mi proyecto.
Matt Clark
1
@MattClark @grid-float-breakpointse define en el compilador: getbootstrap.com/customize : el valor predeterminado es @screen-sm-minpero puede cambiarlo a 1234px.
rybo111
24

Finalmente descubrí cómo cambiar el ancho del colapso jugando con '@ grid-float-breakpoint' en http://getbootstrap.com/customize/ .

Vaya a la línea 2923 en bootstrap.css (también versión mínima) y cambie @media screen and (min-width: 768px) {a@media screen and (min-width: 1000px) {

Entonces el código terminará siendo:

@media screen and (min-width: 1000px) {
  .navbar-brand {
    float: left;
    margin-right: 5px;
    margin-left: -15px;
  }
  .navbar-nav {
    float: left;
    margin-top: 0;
    margin-bottom: 0;
  }
  .navbar-nav > li {
    float: left;
  }
  .navbar-nav > li > a {
    border-radius: 0;
  }
  .navbar-nav.pull-right {
    float: right;
    width: auto;
  }
  .navbar-toggle {
    position: relative;
    top: auto;
    left: auto;
    display: none;
  }
  .nav-collapse.collapse {
    display: block !important;
    height: auto !important;
    overflow: visible !important;
  }
}
Stephen
fuente
Tenga en cuenta que el número de línea que citó será diferente si ha utilizado el Personalizador: getbootstrap.com/customize
henrywright
1
¡Acabo de cambiar el @grid-float-breakpointen mis responsive.lesstrabajos para mí!
cvng
66
Debería anular eso en otro archivo CSS en lugar de cambiar los archivos css bootstrap directamente.
Ivanka Todorova
1
Primera visita: [enlace] ( getbootstrap.com/customize Localizar: 'Menos variables' -> 'Puntos de interrupción de consultas de medios' Cambio: @ valor de pantalla-lg de 1200px a 1920px Localizar: "Sistema de cuadrícula" -> @ grid-float-breakpoint Cambie: @ screen-sm-min a @ screen-lg Desplácese hasta el final de la página. Haga clic en "Compilar y descargar" Extracto y use estos archivos descargados.
rpalzona
13

Acabo de hacer esto con éxito usando el siguiente código CSS.

@media(max-width:1000px)  {

    .navbar-collapse.collapse {
        display: none !important;
    }

    .navbar-collapse {
        overflow-x: visible !important;
    }

    .navbar-collapse.in {
      overflow-y: auto !important;
    }

    .collapse.in {
      display: block !important;
    }

}
ruperto17
fuente
2
No muestra el botón de menú contraído cuando el ancho está entre 768 px y 1000 px.
artesano
44
@craftsman: Para el botón, use esto: .navbar-toggle {display: block! important; } .navbar-header {ancho: 100%; altura: 60px; }
Aniket Suryavanshi
3
todavía no muestra el contenido dentro del menú de hamburguesas
behzad
13

En el código fuente Bootstrap 3. MENOS , hay una variable definida en variables.lessllamada @grid-float-breakpointque tiene el siguiente comentario útil:

//**Point at which the navbar becomes uncollapsed
@grid-float-breakpoint: @screen-sm-min;

El @grid-float-breakpoint-maxvalor de coincidencia se establece en ese menos 1px:

//**Point at which the navbar begins collapsing
@grid-float-breakpoint-max: (@grid-float-breakpoint-max - 1);

Solución:

Así que solo establezca el @grid-float-breakpointvalor en 1000px y reconstruya bootstrap.lessen bootstrap.css:

p.ej

@grid-float-breakpoint: 1000px;
Codificación ido
fuente
¿Cómo reconstruir? Intenté esta línea de comando: $ lessc bootstrap.less bootstrap.csspero no pasó nada
AnthonyR
@AnthonyRn: No tengo idea de cuál es la configuración de su proyecto. Simplemente actualicé la fuente Bootstrap LESS en mi proyecto VS 2013 y se reconstruyó al guardar. tal vez deberías hacer una nueva pregunta?
Gone Coding
Mi problema se resolvió utilizando la herramienta de personalización en línea de Bootstrap aquí getbootstrap.com/customize ¡ Gracias por la solución!
AnthonyR
1
Creo que esta debería ser la respuesta aceptada, ya que utiliza métodos propios de Bootstraps para definir el punto de interrupción. Como ejemplo, pude 'reconstruir' el bootstrap simple y obtuve el resultado deseado al establecer esta variable en lo que necesitaba para ser el punto de interrupción.
Serge Melis
@AnthonyR Para reconstruir, utiliza el comando grunt grunt distque regenerará el directorio dist. Ejecutará ese comando desde el directorio donde tiene su gruntfile.js. Referencia: getbootstrap.com/getting-started/#grunt
Radmation
11

La forma Sass de cambiar las variables de bootstrap está realmente documentada en la página bootstrap-sass github.

Simplemente redefina las variables antes de importar @ bootstrap:

$grid-float-breakpoint: 1000px;

@import 'bootstrap';
pez tropical
fuente
7

Además de @Skely answer, para hacer que funcionen los menús desplegables dentro de la barra de navegación, también agregue sus clases para ser anuladas. Código final a continuación:

    @media (min-width: 768px) and (max-width: 991px) {
        .navbar-nav .open .dropdown-menu {
            position: static;
            float: none;
            width: auto;
            margin-top: 0;
            background-color: transparent;
            border: 0;
            -webkit-box-shadow: none;
            box-shadow: none;
        }
        .navbar-nav .open .dropdown-menu > li > a {
            line-height: 20px;
        }
        .navbar-nav .open .dropdown-menu > li > a,
        .navbar-nav .open .dropdown-menu .dropdown-header {
            padding: 5px 15px 5px 25px;
        }
        .dropdown-menu > li > a {
            display: block;
            padding: 3px 20px;
            clear: both;
            font-weight: normal;
            line-height: 1.42857143;
            color: #333;
            white-space: nowrap;
        }
        .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;*/
            margin: 7.5px 50px 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;
        }
    }

código de demostración

jacvalle
fuente
4

En Bootstrap v4, la navegación puede colapsarse tarde o temprano usando diferentes clases de CSS

p.ej:

  • navbar-toggleable-sm
  • navbar-toggleable-md
  • navbar-toggleable-lg

Con el botón para la navegación:

  • escondido
  • oculto-md-up
  • oculto-lg-up
Eddie Jaoude
fuente
En el alfa actual, parece que solo va navbar-toggleable-smpara mí, xshace que nunca se active. Podría ser yo haciendo algo mal ¡Gracias!
nerdwaller
@nerdwaller parece que tienes razón, hizo una edición de xs a sm.
Whitneyland
3

Para Bootstrap 3.3, este es el único código que necesita:

@media (min-width: 768px) and (max-width: 1000px) {
   .navbar-collapse.collapse {
       display: none !important;
   }
   .navbar-toggle{
        display: block !important;
   }
   .navbar-header{
        float: none;
   }
}
VeeK
fuente
No funciona por completo. Los elementos del menú que muestra no son verticales, sino horizontales.
Volomike
3

Esto funcionó para mí Bootstrap3

@media (min-width: 768px) {
    .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;
      }
}

Tomó un tiempo resolver estos dos:

.navbar-collapse.collapse {
   display: none!important;
}
.navbar-collapse.collapse.in {
   display: block!important;
}
Khaled
fuente
Esto funcionó para mí. La única excepción es que el ancho mínimo de píxeles debe ser de 1000 px en su muestra anterior.
Sascha
2

Su mejor opción sería usar un puerto del procesador CSS que usa.

Soy un gran admirador de SASS, así que actualmente uso https://github.com/thomas-mcdonald/bootstrap-sass

Parece que hay un tenedor para Stylus aquí: https://github.com/Acquisio/bootstrap-stylus

De lo contrario, Buscar y reemplazar es su mejor amigo en la versión CSS ...

allaire
fuente
Entonces, para la opción de buscar y reemplazar, ¿eso significa editar las consultas de medios bootstrap.css directamente? ¿Puedo cambiar una consulta de medios que solo se aplica a la barra de navegación? Me dijeron que no es una buena idea editar los archivos de arranque de origen, pero no sé por qué, ¿qué piensas?
Nearpoint
1

Hola, creo que puedes hacerlo usando CSS como este, puedes cambiar el menú de arranque del punto de interrupción

    @media (max-width: 1200px) {
    .navbar-header {
        float: none;
    }
    .navbar-left,.navbar-right {
        float: none !important;
    }
    .navbar-toggle {
        display: block;
    }

    .navbar-collapse.collapse {
        display: none!important;
    }
    .navbar-nav {
        float: none!important; 
    }
    .navbar-nav>li {
        float: none;
    } 
    .collapse.in{
        display:block !important;
    }
   .navbar-nav .open .dropdown-menu {
       position: static;
       float: none;
       width: auto;
       margin-top: 0;
       background-color: transparent;
       border: 0;
       -webkit-box-shadow: none;
       box-shadow: none;
    }
}
Yasssine ELALAOUI
fuente
1

Las barras de navegación pueden utilizar las clases .navbar-toggler, .navbar-collapse y .navbar-expand {-sm | -md | -lg | -xl} para cambiar cuando su contenido colapsa detrás de un botón. En combinación con otras utilidades, puede elegir fácilmente cuándo mostrar u ocultar elementos particulares.

Para las barras de navegación que nunca colapsan, agregue la clase .navbar-expand en la barra de navegación. Para las barras de navegación que siempre colapsan, no agregue ninguna clase .navbar-expand.

Por ejemplo :

<nav class="navbar navbar-expand-lg"></nav>

El menú móvil se muestra en pantalla grande.

Referencia: https://getbootstrap.com/docs/4.0/components/navbar/

Aung San Myint
fuente
Sí, este funciona para mí exactamente como lo necesitaba. Por supuesto, si necesita puntos de interrupción más específicos, será necesario configurar su propia consulta de medios (de ahí la respuesta favorable a esta pregunta)
Coderhi
0

Esto es lo que me funcionó:

@media only screen and (min-width:769px) and (max-width:1000px){
.navbar-collapse.collapse {
    display: none !important;
}
.navbar-collapse.collapse.in {
    display: block !important;
}
.navbar-header .collapse, .navbar-toggle {
    display:block !important;
}
jeanverster
fuente
Con su solución y la de Veek, descubro que entre 768 y 1000 los márgenes se expanden de manera incorrecta. Están bien fuera de esos límites. Con su solución, el icono del menú contraído tampoco permanece a la derecha después del colapso, sino que presiona contra la "marca".
Mike O'Connor
Lo siento, aparentemente me hice la tonta. Todavía tengo ese problema de los márgenes inapropiadamente amplios que aparecen dentro de esos límites. Sin embargo, ahora veo que un ejemplo oficial de arranque en línea exhibe el mismo problema de márgenes, de forma nativa.
Mike O'Connor el
0

En Bootstrap 4, si desea anular cuando navbar-expand- *, se expande y colapsa y muestra y oculta la hamburguesa (navbar-toggler), debe encontrar ese estilo / definición en bootstrap.css y redefinirlo en su propio customstyle.css (o directamente en bootstrap.css si así lo desea).

P.ej. Quería que navbar-expand-lg colapsara y mostrara navbar-toggler a 950px. En bootstrap.css encuentro:

@media (max-width: 991.98px) {
  .navbar-expand-lg > .container,
  .navbar-expand-lg > .container-fluid {
    padding-right: 0;
    padding-left: 0;
  }
}

Y debajo de eso ...

@media (min-width:992px) { 
    ... lots of styling ...
}

Copié ambas consultas de @media y las pegué en mi style.css, luego modifiqué el tamaño para adaptarlo a mis necesidades. En mi caso, quería que colapsase a 950 px. Las consultas @media deben tener diferentes tamaños (supongo), por lo que configuré el ancho máximo del contenedor en 949.98px y usé el 950px para la otra consulta @media, por lo que el siguiente código se agregó a mi style.css. Esto no fue fácil de desenredar de soluciones retorcidas que encontré en Stackoverflow y en otros lugares. Espero que esto ayude.

@media (max-width: 949.98px) {
    .navbar-expand-lg > .container,
    .navbar-expand-lg > .container-fluid {
        padding-right: 0;
        padding-left: 0;
    }
}

@media (min-width: 950px) {
    .navbar-expand-lg {
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-flow: row nowrap;
        flex-flow: row nowrap;
        -webkit-box-pack: start;
        -ms-flex-pack: start;
        justify-content: flex-start;
    }
    .navbar-expand-lg .navbar-nav {
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-direction: row;
        flex-direction: row;
    }
    .navbar-expand-lg .navbar-nav .dropdown-menu {
        position: absolute;
    }
    .navbar-expand-lg .navbar-nav .dropdown-menu-right {
        right: 0;
        left: auto;
    }
    .navbar-expand-lg .navbar-nav .nav-link {
        padding-right: 0.5rem;
        padding-left: 0.5rem;
    }
    .navbar-expand-lg > .container,
    .navbar-expand-lg > .container-fluid {
        -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
    }
    .navbar-expand-lg .navbar-collapse {
        display: -webkit-box !important;
        display: -ms-flexbox !important;
        display: flex !important;
        -ms-flex-preferred-size: auto;
        flex-basis: auto;
    }
    .navbar-expand-lg .navbar-toggler {
        display: none;
    }
    .navbar-expand-lg .dropup .dropdown-menu {
        top: auto;
        bottom: 100%;
    }
}
Jack Mason
fuente
0

Aquí mi código de trabajo usando React with Bootstrap

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
    crossorigin="anonymous">
<style>
  @media (min-width: 768px) and (max-width: 1000px) {
   .navbar-collapse.collapse {
       display: none !important;
   }
   .navbar-toggle{
        display: block !important;
   }
   .navbar-header{
        float: none;
   }
}
  </style>
webmastx
fuente
0

Ahora es compatible con Bootstrap 4.4

navbar-expand-sm 
Almiar
fuente
Sí, correcto, pero necesitaría navbar-expand-lg para colapsar el navegador en pantallas grandes
Coderhi