web-dev-qa-db-fra.com

Bootstrap: comment réduire la barre de navigation plus tôt

Je veux réduire ma barre de navigation dans une résolution antérieure à 768px, par exemple 992px, comment ferais-je? Merci! (Je sais que je peux le personnaliser sur la page bootstrap, mais je ne veux pas recommencer mon projet avec un nouveau fichier bootstrap.css)

csstwitter-bootstrapnavbarcollapse
44
Edward

Si vous ne voulez pas manipuler Bootstrap en utilisant Less/Sass (peut-être parce que vous voulez le charger via un CDN), voici ce qui a été décisif pour moi:

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

Démo: https: //jsfiddle.net/0pmy8usr/

Ajoutez ceci dans un fichier CSS séparé et incluez-le après bootstrap.css

UPDATE pour 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}
}

Démo: https: //jsfiddle.net/mkvhbgnp/3/

89
Gerfried

Dans variables.less, changement

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

à

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

Si vous devez réduire votre barre de navigation dans une résolution antérieure à 768px, vous devrez utiliser @media min-width et max-width, et vous n'avez pas besoin de démarrer un nouveau projet pour créer simplement un nouveau fichier . css ( exemple: custom.css ) et insérez-le sous votre principal bootstrap.css pour remplacer ses valeurs. et écrivez ce code à l'intérieur:

CODE:

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

Vous pouvez également consulter cette publication: change bootstrap navbar collapse .

J'espère que cela vous donnera la solution.

7
Ahmed Na.

Vous pouvez également remplacer les classes bootstrap qui comblent l’écart. Le code ci-dessous est le code de travail qui remplace les barres de navigation de base avec des menus déroulants. Toutes les classes ne sont pas remplacées ci-dessous. peut avoir besoin de remplacer d'autres classes.

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

cliquez ici pour le code de la démonstration en direct

4
jacvalle

Je suggère d’introduire bootstrap) dans votre projet au lieu d’un CDN et de rechercher simplement la requête multimédia qui ressemble à ceci:

@media (min-width: 768px) {
  .navbar-expand-md {
    -ms-flex-flow: row nowrap;
    flex-flow: row nowrap; //...etc.

Et changez le en:

@media (min-width: 900px) {
  .navbar-expand-md {
    -ms-flex-flow: row nowrap;
    flex-flow: row nowrap; // ...etc.

Ou, si vous utilisez un CDN, créez un remplacement pour cette requête multimédia spécifique.

0
Erik James Robles