css - right - navbar bootstrap

Bootstrap: cómo colapsar la barra de navegación antes

Question

Quiero colapsar mi barra de navegación en una resolución anterior a 768px, por ejemplo 992px, ¿cómo lo haría? ¡Gracias! (Sé que puedo personalizarlo en la página de arranque, pero no quiero comenzar de nuevo mi proyecto con el nuevo archivo bootstrap.css)

Answer 1

En variables.less , cambie

@grid-float-breakpoint:   @screen-sm-min

a

@grid-float-breakpoint: @screen-md-min;  

Answer 2

Si necesita contraer su barra de navegación en una resolución anterior a 768px, necesitará usar @media min-width y max-width , y no necesita iniciar un nuevo proyecto para hacerlo simplemente cree un nuevo archivo .css ( ejemplo: custom.css ) y lo inserta debajo de su bootstrap.css principal para anular sus valores. y escribe este código dentro de él:

CÓDIGO:

@media (min-width: 992px) {
   .collapse {
       display: none !important;
   }
}

Además, puedes echar un vistazo a esta publicación: cambiar el colapso de la barra de navegación de bootstrap .

Espero que esto te dé la solución.

Answer 3

Si no quieres manipular Bootstrap usando Less / Sass (tal vez porque quieres cargarlo a través de un CDN), esto es lo que hizo el truco para mí:

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

Demostración: https://jsfiddle.net/0pmy8usr/

Agregue esto en un archivo CSS separado e inclúyalo después de bootstrap.css

ACTUALIZACIÓN para Bootstrap 4:

@media(max-width:900px) {
  .navbar .navbar-brand {float:none;display: inline-block;}
  .navbar .navbar-nav>.nav-item { float: none; margin-left: .1rem;}
  .navbar .navbar-nav {float:none !important;}
  .nav-item{width:100%;text-align:left;} 
  .navbar-toggler {display: block !important;}
  .navbar-toggleable-sm.collapse {display:none !important}
  .navbar-toggleable-sm.collapse.in {display:block !important}
}

Demostración: https://jsfiddle.net/mkvhbgnp/3/

Answer 4

También puede anular las clases de arranque que cierran el espacio. Bellow es el código de trabajo que anula las barras de navegación básicas con menús desplegables. No todas las clases son anuladas abajo, por lo tanto, dependiendo de lo que esté usando, es posible que deba anular otras clases.

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

haga clic aquí para obtener el código de demostración en vivo