web-dev-qa-db-fra.com

Bootstrap 4 - Déplacer des liens à droite de la barre de navigation avec un bouton bascule

J'essayais de déplacer les liens de la gauche de la barre de navigation vers le côté droit et cela ne m'a pas permis. J'ai essayé de le faire glisser vers la droite et rien ne s'était passé, comme avec la position: relative; à droite: 200px; et padding-right: -200px ;. Si quelqu'un a d'autres suggestions, ce serait apprécié. Merci.

<nav class="navbar navbar-toggleable-md navbar-light bg-faded">

    <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">

        <span class="navbar-toggler-icon"></span>

    </button>

    <a class="navbar-brand" href="index.html">

        <img id="logo" src="images/logo.png" width="200" class="d-inline-block align-top" alt="">

    </a>

    <div class="collapse navbar-collapse" id="navbarSupportedContent">

        <ul class="navbar-nav mr-auto">

            <li class="nav-item">
                <a class="nav-link active text-white" href="index.html">Home <span class="sr-only">(current)</span></a>
            </li>

            <li class="nav-item">
                <a class="nav-link text-white" href="services.html">Services</a>
            </li>

            <li class="nav-item">
                <a class="nav-link text-white" href="portfolio.html">Portfolio</a>
            </li>

            <li class="nav-item">
                <a class="nav-link text-white" href="about.html">About</a>
            </li>

        </ul>

    </div>
</nav>
htmlcssbootstrap-4
9
Cameron Foster

Vous utilisez le .mr-auto, vous avez donc margin-right: auto !important et les éléments de navigation à gauche alignés.
Si vous changez la classe en .ml-auto vous avez margin-left: auto !important et vos éléments de navigation sont alignés à droite

20
Julian Stark

Après avoir essayé toutes les options, l’icône de menu (navbar-toggler-icon) ne se déplaçait pas vers la droite dans Bootstrap 4.1.
J'ai essayé le travail suivant autour de:
Sous@media (max-width:575px)- a ajouté .navbar-header {width:100%;}, et sous classe.menu-icon(je l’ai nommée icône-menu) {justify-content:end;}.
Ceci a déplacé le navbar-brand et le menu-icon vers la droite. Pour déplacer le navbar-brand vers la gauche, dans le code HTML ajouté, la classe mr-auto à navbar-brand. Cela a bien fonctionné pour moi.

1
A G Aranha

Si tout ce qui précède échoue, j'ai ajouté 100% width à la classe navbar en CSS. Jusque-là, mr-auto ne travaillait pas pour moi sur ce projet utilisant Bootstrap 4.1.

0
Dominic Davies

Modifiez quelques css dans le bootstrap:

justify-content: end; utilisé pour commencer le contenu pour la fin

.mr-auto {
    margin-right: 0 !important;
}
.navbar-toggleable-md .navbar-collapse {         
    -webkit-justify-content: flex-end;
    justify-content: flex-end;  
}

Voici le code de violon: https://jsfiddle.net/0ewenvcb/2/

0
Mukesh Ram