web-dev-qa-db-fra.com

Bootstrap 3 - Afficher la navigation réduite pour toutes les tailles d'écran

J'utilise Bootstrap v3.

Les classes de la barre de navigation sont en place, de sorte que lorsque la taille de l'écran est ajustée, la navigation se réduit et que le petit bouton bascule en forme de grille s'affiche. Il fonctionne donc comme prévu.

ce que je voudrais, c’est que ce soit l’action par défaut pour toutes les tailles d’écran. C'est-à-dire que même sur un ordinateur de bureau, j'aimerais que la navigation soit réduite et que le bouton bascule soit visible.

J'ai parcouru le css et il y a tout un tas de choses qui fournissent les fonctionnalités, mais je ne sais pas quelles parties changer.

J'ai essayé de commenter les requêtes médiatiques plus importantes, bien qu'il y en ait beaucoup et que cela semble avoir un effet d'entraînement sur les autres styles.

des idées?

htmlcsstwitter-bootstraptwitter-bootstrap-3
32
Darren Wainwright

Vous pouvez utiliser le paramètre par défaut Bootstrap CSS comme celui-ci ...

    .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;
    }
    .navbar-nav>li {
        float: none;
    }
    .navbar-nav>li>a {
        padding-top: 10px;
        padding-bottom: 10px;
    }

Démo: http://www.bootply.com/114896

Cela garantira que la barre de navigation réduite est toujours utilisée en remplaçant les requêtes Bootstrap @media.

Mise à jour: Pour Bootstrap 4, il vous suffit de supprimer le navbar-toggleable class: http://www.codeply.com/go/LN6szcJO5

39
Zim

C'est ce qui a fonctionné pour moi.

Visitez: http://getbootstrap.com/customize/

Recherchez: 'Moins de variables' -> 'Points d'interrogation des requêtes de supports'

Changement: valeur de @ screen-lg de 1200px à 1920px

Localiser: "Système de grille" -> @ grid-float-breakpoint

Changement: @ screen-sm-min à @ screen-lg

Faites défiler jusqu'à la fin de la page.

Cliquez sur "Compiler et télécharger"

Extrayez et utilisez ces fichiers téléchargés.

10
TheAllSeeingI

Cela a fonctionné pour moi:

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

Si supposons que vous rencontriez des problèmes avec la bascule aussi, alors mettez ce qui suit:

.navbar-collapse.collapse.in{
    display: block!important;
}
7
user5093523

Je voulais gagner du temps, mais ce n'était pas parfait. J'ai eu quelques problèmes avec le dernier bootstrap, il y a du code inutile et un problème de overflow dans le menu déroulant. Ce code était la meilleure solution pour moi:

.navbar-header {
    float: none;
}
.navbar-toggle {
    display: block;
}
.navbar-collapse.collapse {
    display: none!important;
}
.navbar-collapse.collapse.in {
    display: block!important;
}
.navbar-nav {
    float: none!important;
}
.navbar-nav>li {
    float: none;
}
2
Sajidur Rahman

Ajout de 100% de valeur sur @grid-float-breakpoint _ (Système de grille -> @grid-float-breakpoint -> 100% au lieu de @screen-sm-min).

1
Raju Gurung

Le moyen le plus simple que j'ai trouvé est de changer le fichier variable.less et de changer

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

à

// Navbar collapse
//** Point at which the navbar becomes uncollapsed.
@grid-float-breakpoint:     ( your break point );

Seulement si vous utilisez MOINS ofc.

1
wilcocammeraat