Problème : Malgré diverses tentatives, l'utilisateur ne parvient pas à centrer un élément dans une barre de navigation Bootstrap.
Réponse :
La Navbar utilise flexbox, vous permettant de centrer les éléments à l'aide de la classe mx-auto.
<nav class="navbar navbar-expand-md navbar-dark bg-dark main-nav"> <div class="container"> <ul class="nav navbar-nav"> <li class="nav-item active"><a class="nav-link" href="#">Home</a></li> <li class="nav-item"><a class="nav-link" href="#">Download</a></li> <li class="nav-item"><a class="nav-link" href="#">Register</a></li> </ul> <ul class="nav navbar-nav mx-auto"> <li class="nav-item"><a class="nav-link" href="#">Website Name</a></li> </ul> <ul class="nav navbar-nav"> <li class="nav-item"><a class="nav-link" href="#">Rates</a></li> <li class="nav-item"><a class="nav-link" href="#">Help</a></li> <li class="nav-item"><a class="nav-link" href="#">Contact</a></li> </ul> </div> </nav>
Pour Bootstrap 4.1 et supérieur, utilisez mx-auto au lieu de pull-left et pull-right pour aligner la gauche et la droite menus :
<nav class="navbar navbar-expand-md navbar-dark bg-dark main-nav"> <div class="container"> <ul class="nav navbar-nav"> <li class="nav-item active"><a class="nav-link" href="#">Home</a></li> <li class="nav-item"><a class="nav-link" href="#">Download</a></li> <li class="nav-item"><a class="nav-link" href="#">Register</a></li> </ul> <ul class="nav navbar-nav mx-auto"> <li class="nav-item"><a class="nav-link" href="#">Website Name</a></li> </ul> <ul class="nav navbar-nav"> <li class="nav-item"><a class="nav-link" href="#">Rates</a></li> <li class="nav-item"><a class="nav-link" href="#">Help</a></li> <li class="nav-item"><a class="nav-link" href="#">Contact</a></li> </ul> </div> </nav>
Rappelez-vous que ces solutions peuvent présenter des inconvénients, comme ne pas aligner parfaitement l'élément centré avec les éléments adjacents de taille variable. largeurs.
Remarques supplémentaires :
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!