J'ai une simple barre de navigation:

<nav class="navbar navbar-inverse navbar-toggleable-md fixed-top custom-navbar" style="background-color: #321048;">
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarResponsive">
            <ul class="navbar-nav d-flex justify-content-end" style="width:100%">
              <li class="nav-item">
                <a class="nav-link" href="#home">Home</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#rolfing">Rolfing</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#packages">Packages</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#about">About</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#footer">Contact</a>
              </li>
            </ul>
        </div>
</nav>

Et tout fonctionne comme prévu pour toutes les tailles d'écran. entrez la description de l'image ici Je voulais justifier à droite le basculement car le menu est justifié à droite. Donc, par Bootstrap 4 alpha 6, j'ai ajouté

navbar-toggler-right

Au bouton, et cela justifie bien le bouton, mais la barre de navigation elle-même ne se développe plus pour remplir le bouton. Le bouton bascule semble donc flotter. Je suis content de laisser navbar-toggler-right out, laissez-le fonctionner, mais je suis simplement curieux de savoir pourquoi cela ferait cela. quelque chose à voir avec navbar-toggler-right ayant peut-être une position absolue. navbar-toggler-left fait également la même chose.

enter image description here

MODIFIER Pour offrir plus de détails, peu importe que le bouton bascule soit à gauche ou à droite. L'ajout de la classe navbar-toggler-left pose le même problème. Ma question n'est pas de savoir comment déplacer le bouton bascule vers la droite (je peux le faire en ajoutant float: right au bouton), mais pourquoi le Les classes navbar-toggler-left et right ont ce comportement étrange.

3
The4thIceman 25 janv. 2017 à 23:23

4 réponses

Meilleure réponse

Il y a un problème ouvert pour cela:

https://github.com/twbs/bootstrap/issues/21846

Une solution de contournement consiste à utiliser un espace réservé au lieu de navbar-brand

<span class="navbar-text">&nbsp;</span>

3
Zim 26 janv. 2017 à 00:23

Vous pouvez essayer d'utiliser navbar-toggle au lieu de navbar-toggler. Cela pourrait aider mais dans votre situation, mais pas certain.

-2
grizzthedj 26 nov. 2017 à 16:33

J'ai eu le même problème. Le nom de marque et la bascule étaient alignés à gauche. J'ai résolu le problème avec <ul class="navbar-nav ml-auto ">. Ça a marché.

Alors, vous pouvez essayer <ul class="navbar-nav ml-auto "> au lieu de ul class="navbar-nav d-flex justify-content-end" style="width:100%"

0
MrzCD 16 févr. 2020 à 18:06

Aucune infraction mais vous ne devez ajouter que .ml-auto, cela fonctionne.

12
clemens 3 janv. 2018 à 07:17