Cambiar el punto de interrupción del colapso de navegación de Bootstrap sin usar menos

StackOverflow https://stackoverflow.com/questions/19827605

Pregunta

Actualmente, cuando el ancho del navegador cae por debajo de 768px, el Navbar cambia al modo colapsado. Quiero cambiar este ancho a 1000px, por lo que cuando el navegador está por debajo de 1000px, el Navbar cambia al modo colapsado. Quiero hacer esto sin usar menos, estoy usando a Stylus, 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 variable. No he estado lidiando con menos, estoy usando stylus, así que quiero saber cómo se puede hacer esto usando lápiz óptico u otro método.

¡Gracias!

¿Fue útil?

Solución 2

Tienes que escribir un específico consulta de medios Para esto, a partir de su pregunta, por debajo de 768px, el Navbar colapsará, así que aplíquelo por encima de 768px y por debajo de 1000px, solo así:

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

Esto ocultará el colapso de Navbar hasta la ocurrencia predeterminada de la unidad de arranque. A medida que la clase de colapso voltea, los activos internos dentro del colapso de Navbar se ocultarán automáticamente, como sabio, debe configurar su CSS como deseó el diseño.

Otros consejos

Actualización de 2018

Bootstrap 4

Cambiar el punto de interrupción de Navbar es más fácil en Bootstrap 4 usando el 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 excluyes navbar-expand-* El menú móvil se utilizará en all anchos. Aquí hay una demostración de los 6 estados de Navbar: Bootstrap 4 NAVBAR Ejemplo

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

@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 .dropdown-menu {
        position: absolute;
    }
    .navbar-expand-custom .nav-link {
        padding-right: .5rem;
        padding-left: .5rem;
    }
    .navbar-expand-custom > .container {
        flex-wrap: nowrap;
    }
    .navbar-expand-custom .navbar-collapse {
        display: flex!important;
        flex-basis: auto;
    }
    .navbar-expand-custom .navbar-toggler {
        display: none;
    }
}

Bootstrap 4 Disfraz Punto de ruptura de navbar
Bootstrap 4 Ejemplos de punto de interrupción de navbar

** Bootstrap 3 **

Para bootstrap 3.3.x, aquí está el laboral CSS para anular el punto de interrupción de Navbar. Cambio 991px A la dimensión del píxel del punto en el que desea que el Navbar colappee ...

@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 cualquier cosa Más de 768px. Si necesita cambiarlo a menos de 768px la El ejemplo de menos de 768px está aquí.

en bootstrap3, cambia esta variable @Grid-Float-Breakpoint al que necesitas. El valor predeterminado es 768px

Finalmente elaboré cómo cambiar el ancho de colapso al violar con '@grid-float-breakpoint' en http://getbootstrap.com/customize/.

Vaya a la línea 2923 en bootstrap.css (también versión min) 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;
  }
}

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

}

En la bootstrap 3. código fuente, hay una variable definida en variables.less llamó @grid-float-breakpoint que tiene el siguiente comentario útil:

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

La coincidencia @grid-float-breakpoint-max El valor 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 establece el @grid-float-breakpoint valor a 1000px en su lugar y reconstruir bootstrap.less dentro bootstrap.css:

p.ej

@grid-float-breakpoint: 1000px;

La forma sass de cambiar las variables de bootstrap en realidad se documenta en el bootstrap-sass Página de Github.

Simplemente redefine las variables antes de que usted @import bootstrap:

$grid-float-breakpoint: 1000px;

@import 'bootstrap';

Además de @skely respuesta, para hacer menús desplegables Dentro del trabajo de Navbar, también agregue sus clases para ser anulantes. 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

Navbars puede utilizar .navbar-toggler, .navbar-colapse y .navbar-expand {-sm | -md | -lg | -xl} clases 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-expandir en la barra de navegación. Para las barras de navegación que siempre colapsan, no agregue ninguna clase .navbar-expandir.

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/

En Bootstrap V4, la navegación se puede colapsar tarde o temprano utilizando diferentes clases de CSS

p.ej:

  • navbar-togglable-sm
  • Navbar-Togglable-MD
  • Navbar-Togglable-LG

Con el botón para la navegación:

  • escondido
  • escondido
  • escondido

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

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

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

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, Search & Reemplazar es su mejor amigo en la versión CSS ...

Hola, creo que puedes hacerlo usando CSS como este, puedes cambiar el menú de bootstrap de punto de ruptura 

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

Este es el código de trabajo para mí. (También funciona el menú desplegable de Navbar)

@media (max-width: 1199px) {
  .navbar-nav {
    margin: 7.5px -15px;
 }
  .ul-links {
    display: block;
  }
  .navbar-nav>li>a {
    padding-top: 10px;
    padding-bottom: 10px;
    line-height: 20px;
  }  
  .navbar-header {
      float: none;
  }
  .navbar-left,.navbar-right {
      float: none !important;
  }
  .navbar-toggle {
      display: block;
  }

  .navbar-collapse.collapse {
      display: none!important;
      max-height: none;
  }
  .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;
  }
}

Esto es lo que me hizo el truco:

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

En Bootstrap 4, si desea unir en exceso cuando Navbar-Expand-*, expande y colapsa y muestra y esconde la hamburguesa (Navbar-Toggler), debe encontrar ese estilo/definición en bootstrap.css, y redefinirla en su propio customstyle.css (o directamente en bootstrap.css si está inclinado).

P.ej. Quería que el Navbar-Expand-LG se derrumbara y muestra el 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é tanto las consultas de @Media y las pegué en mi estilo.css, luego modifiqué el tamaño para satisfacer mis necesidades. En mi caso, quería que colapsara a 950px. Las consultas @Media deben ser de diferentes tamaños (supongo), así que configuré el ancho de contenedor máximo en 949.98px y usé el 950px para la otra consulta @media y, por lo tanto, el siguiente código se agregó a mi estilo.css. Esto no fue fácil de desenredar de las 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%;
    }
}

Aquí mi código de trabajo usando en React con 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>

Ahora es compatible con Bootstrap 4.4

navbar-expand-sm
Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top