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


Ma barre de navigation Bootstrap 3 est une ligne sur une grande fenêtre. Ensuite, lorsque je commence à réduire la fenêtre du navigateur, il passe à 2 lignes, où le bon contenu ("Bonjour nom d'utilisateur", "Fermer la session") se trouve dans la deuxième ligne.

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

Comment puis-je sauter la phase 2 lignes?


35
2017-11-15 23:49


origine


Réponses:


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

Définissez cette valeur sur une valeur supérieure, la valeur par défaut étant 768px ignorera le fond 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écharger le source depuis github, changement @grid-float-breakpoint dans variables.less et recompiler bootstrap
  • Utilisez le personnaliseur et téléchargez votre propre copie

Voir également: https://stackoverflow.com/a/18944192/1596547

METTRE À JOUR

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

Vos options sont les suivantes:

  • changer le point d'arrêt de la grille pour que la barre de navigation reste réduite jusqu'à ce que l'écran soit suffisamment large pour votre grande barre de navigation
  • utilisation classes d'utilité réactive masquer certaines parties de la barre de navigation à des largeurs d’écran plus étroites afin qu’elle corresponde à ces largeurs
  • retravaillez vos objets de la barre de navigation pour qu'ils soient plus courts / moins verbeux

20
2017-11-16 22:46



Pour ce que cela vaut, voici une idée qui fait que les éléments de la barre de navigation passent du texte à une icône en fonction de la taille de la réactivité 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» est converti en une icône plus à petite taille. Voici un par exemple


27
2018-01-30 19:35



Une solution alternative qui n'implique pas la recompilation du bootstrap est d'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 comment cela fonctionne: Cela indique au navigateur de réduire la barre de navigation dans un navicon 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 à 2 lignes. Je l'utilise pour la navbar de mon site, que je n'ai besoin que de travailler sur chrome / ipad / iphone / samsung mobile. C'est sans doute un hack mais c'est simple et facile à tester.


3
2017-07-22 15:48



Nous avons trouvé un moyen plus simple de réduire l’indicateur de navigation à partir d’une autre réponse postée quelque part, en utilisant des espaces blancs: nowrap. 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
2018-02-17 19:06



Vous pouvez simplement personnaliser les numéros pour différentes configurations dans les fichiers de démarrage _variables.scss. Vous pouvez le faire de différentes manières selon la manière dont vous obtenez la bibliothèque bootstrap.

  1. Si vous l'obtenez en utilisant l'URL bootstrap, vous devrez le télécharger, le modifier et l'inclure dans vos ressources (car vous devez personnaliser le lien vers l'amorçage local)
  2. Si vous utilisez une sorte d'automatisation pour l'exécution de tâches (par exemple, grunt, gulp), elles comportent toutes une tâche de remplacement de chaîne dans laquelle vous pouvez simplement modifier les fichiers de bibliothèque en exécutant une tâche.

0
2018-03-06 15:22



Manière la plus simple Travaillé pour moi Chemin Sass

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


0
2018-04-28 11:35