web-dev-qa-db-fra.com

Désactiver la barre de navigation Bootstrap 3 avec 2 lignes en taille de fenêtre moyenne

La barre de navigation My Bootstrap 3 est constituée d'une rangée dans une grande fenêtre. Ensuite, lorsque je commence à réduire la fenêtre du navigateur, il passe à 2 lignes, où le contenu approprié ("Hello nom d'utilisateur", "Déconnexion") se trouve sur la deuxième ligne.

Puis, après plus de redimensionnement, il redevient 1 rangée avec les éléments de menu disparus et le bouton de menu présent uniquement.

Comment puis-je ignorer la phase à 2 rangées?

twitter-bootstraptwitter-bootstrap-3
37
Adam Szabo

Le point (largeur de l'écran) situé entre la barre de navigation réduite, le bouton de menu uniquement et la barre de navigation horizontale à 2 ou 1 rangée est défini par le point d'arrêt grid-float.

Définissez cette valeur sur une valeur plus élevée. La valeur par défaut est 768px pour ignorer le fichier de 2 lignes. Essayez 992px, la limite de la grille moyenne.

Pour changer le point d'arrêt de la grille, vous aurez deux options:

  • téléchargez le code source depuis github , changez @grid-float-breakpoint dans variables.less et recompilez le bootstrap
  • utilisez le customizer et téléchargez votre copie

Voir aussi: https://stackoverflow.com/a/18944192/1596547

METTRE À JOUR

par cvrebert sur https://github.com/twbs/bootstrap/issues/11539#issuecomment-28805244 :

Vos options sont:

  • changez le point de flottement de la grille de sorte que la barre de navigation reste réduite jusqu'à ce que l'écran soit suffisamment large pour que votre grande barre de navigation
  • utilisez responsive classes d'utilitaires pour masquer certaines parties de la barre de navigation à des largeurs d'écran plus étroites afin qu'elles s'adaptent à ces largeurs
  • retravailler vos éléments de la barre de navigation afin qu'ils soient plus courts/moins verbeux
20
Bass Jobsen

Voici une idée qui permette aux éléments de la barre de navigation de passer du texte à une icône en fonction de la taille de réponse actuelle.

<li><a href="#contact"><div class="hidden-sm">Contact<b class="caret"></b></div><span class="glyphicon glyphicon-plus visible-sm"></span></a></li>

Le résultat est que le texte "Contact" se transforme en une icône plus en petite taille. Voici un exemple bootply

29
daryl

Une solution alternative qui ne nécessite pas de recompilation de l’amorçage consiste à ajouter ce qui suit à votre css:

@media (max-width: 950px) {
    .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;
    }
    .navbar-text {
        float: none;
        margin: 15px 0;
    }
    .navbar-collapse.collapse.in { 
        display: block!important;
    }
    .collapsing {
        overflow: hidden!important;
    }
}

EDIT sur la façon dont cela fonctionne: Ceci indique au navigateur de réduire la barre de navigation en un icone si le support est inférieur à une largeur de pixel. Vous devez définir la largeur de pixel de manière appropriée pour éviter d’obtenir une barre de navigation de 2 lignes. J'utilise ceci pour la barre de navigation de mon site Web, sur lequel je n'ai besoin que de travailler sur chrome/ipad/iphone/samsung mobile. C'est un bidouillage, mais c'est simple et facile à tester.

3
Sebapi

Manière la plus simple. Travaillé pour moi Façon Sass

.navbar-nav>li float: left .navbar-header float: left .navbar-right float: right!important

0
Nagibaba

Nous avons trouvé un moyen plus simple de réduire la barre de navigation en s'inspirant d'une autre réponse postée quelque part, en utilisant un espace blanc: Voici ce qui a bien fonctionné:

<div class="container-fluid">
    <div class="collapse navbar-collapse navbar-ex1-collapse" style="width:100%;float:none;position:relative;">
        <ul class="nav navbar-pills nav-justified" role="navigation" style="width:auto;white-space: nowrap;">
            <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">Heading 1 <b class="caret"></b></a>
                <ul class="dropdown-menu">
                    <li><a href="#">Item 1</a></li>
                    <li><a href="#">Item 2</a></li>
                </ul>
            </li> ...
           </ul>
      </div>
</div>
0
gsh

Vous pouvez simplement personnaliser les numéros pour différentes configurations dans les fichiers d'amorçage _variables.scss. Il existe différentes façons de procéder, en fonction de la manière dont vous obtenez la bibliothèque d'amorçage. 

  1. Si vous l'obtenez en utilisant l'URL d'amorçage, vous devrez le télécharger, le modifier et l'inclure à vos actifs (car vous personnalisez, vous devez créer un lien vers l'amorçage local).
  2. Si vous utilisez une sorte d'automatisation pour l'exécution d'une tâche (par exemple, grunt, gulp), ils ont tous une tâche de remplacement de chaîne dans laquelle vous pouvez simplement éditer des fichiers de bibliothèque en exécutant une tâche. 
0
Wildhammer