Bootstrap navbar collapse media-query sur une largeur personnalisée

Helo les gars, je veux modifier la barre de navigation afin de s'effondrer sur @screen-md :992px;.
J'ai modifié navbar.less, mais toujours pas de travail et je ne sais pas quoi faire.

Alors, comment puis-je modifier le @grid-float-breakpoint variable afin que le menu s'est effondré sur le support (personnalisée) taille de requête?

VIOLON:

source d'informationauteur BurebistaRuler

  1. 29

    Vous pouvez modifier l'effondrement point 3.1 comme ça..

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

    http://www.bootply.com/120951

    Dans Bootstrap 4en changeant le point d'arrêt est plus facile. Voir cette réponse

  2. 1

    Si vous utilisez Twitter Bootstrap, de la réactivité de l'effondrement est déjà intégré. Vous n'avez qu'à l'appeler avec une classe dans votre menu. Mais c'est le css que j'utilise dans la plupart de l'Amorçage d'applications qui j'ai travaillé, y compris celui que je travail en ce moment

    @media(min-width:768px) {
   .navbar-collapse {
    width: auto;
    /* more code here */
}

    modifier la largeur min pour la largeur que vous voulez pour se dérober.

  3. 1

    Dans variables.less changement

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

    à

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

    ou à quelque autre de la largeur que vous souhaitez.

    C'est facile et indolore fait de cette façon.

  4. 1

    Voici le code que j'ai utilisé pour résoudre ce problème, il suffit de l'ajouter à votre feuille de style.

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