J'utilise Bootstrap 4 et j'essaie de créer le menu qui apparaît en cliquant sur le bouton Réduire pour l'ouvrir sur le côté droit au lieu de gauche. J'ai essayé d'utiliser "ml-auto" sur l'élément "ul". Les éléments de la barre de navigation sont correctement sur le côté droit lorsqu'ils ne sont pas réduits. Lorsqu'il est réduit, le bouton est correctement sur le côté droit mais le menu apparaît sur la gauche. J'ai également essayé de mettre "ml-auto" dans le div, mais cela n'a pas fonctionné. Voici mon HTML:
<nav class="navbar navbar-expand-lg navbar-dark fixed-top">
<a class="navbar-brand" href="#home"><img id="logo" class="no-opacity" src="content/white-logo.png"></a>
<button class="navbar-toggler ml-auto" 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>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#home"><i class="fa fa-home fa-fw" aria-hidden="true"></i> Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#about"><i class="fa fa-user fa-fw" aria-hidden="true"></i> About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#projects"><i class="fa fa-folder-open fa-fw" aria-hidden="true"></i> Projects</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#experience"><i class="fa fa-briefcase fa-fw" aria-hidden="true"></i> Experience</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contact"><i class="fa fa-envelope fa-fw" aria-hidden="true"></i> Contact</a>
</li>
</ul>
</div>
</nav>
J'ai l'impression qu'il existe une solution simple mais je ne peux pas la comprendre. Merci pour l'aide!
3 réponses
Ajoutez simplement une règle simple à votre css.
.nav-item{
text-align: right;
}
Selon http://getbootstrap.com/docs/4.0/components/navs / # alignement horizontal, la façon de centrer, de justifier à droite ou de justifier à gauche des éléments dans le menu déroulant réduit de la barre de navigation consiste à utiliser justify-content-end et ses amis dans le class d'un {{ X2}}.
Exemple. Ce code donne l'image qui le suit.
<nav class="navbar navbar-expand-lg fixed-top">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<ul class="list-inline social-buttons">
{% for link in site.social %}
<li class="list-inline-item">
<a href="{{ link.url }}"><i class="{{ link.icon }}"></i></a>
</li>
{% endfor %}
</ul>
<div class="navbar-toggler" data-toggle="collapse" data-target="#menu">
☰<!-- three bars symbol -->
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="menu">
<ul class="nav ml-auto">
<a class="nav-link page-scroll" href="#about">About</a>
<a class="nav-link page-scroll" href="#projects">Projects</a>
<a class="nav-link page-scroll" href="#writing">Writing</a>
<a class="nav-link page-scroll" href="#contact">Contact</a>
</ul>
</div>
</div>
</nav>
Modifiez maintenant cette ligne pour:
<div class="nav ml-auto justify-content-end">
Les rendements
Notez que cela n'a évidemment rien à voir avec ml-auto, qui, lorsqu'il est manquant, fait que les éléments de menu non réduits (sur un écran plus large) ne sont pas justifiés à droite. (Le bouton bascule lui-même est toujours justifié à droite pour moi.) Seul justify semble contrôler le contenu du menu non réduit.
Utilisez simplement "text-right" dans HTML
Par exemple:
<div class="navbar-collapse text-right" id="navbarResponsive">