Changer l'espace entre chaque élément dans Bootstrap navbar
Comment puis-je créer un espace plus grand entre chaque lien sur ma barre de navigation, pour qu'ils soient plus éloignés? Est-ce quelque chose que je change le CSS ou HTML? Voici comment j'ai implémenté ma navbar dans le html:
<div class="navbar-wrapper">
<div class="container">
<div class="navbar navbar-static-top" role="navigation">
<div class="container full-width">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"></a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active"><a href="#home_page">Home</a></li>
<li><a href="#about_page">About</a></li>
<li><a href="#portfolio_page">Portfolio</a></li>
<li><a href="#contact_page">Contact</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
3 réponses
vous pouvez changer cela dans votre CSS avec la propriété padding:
.navbar-nav > li{
padding-left:30px;
padding-right:30px;
}
vous pouvez aussi définir margin
.navbar-nav > li{
margin-left:30px;
margin-right:30px;
}
il suffit de se rappeler que la modification du rembourrage ou des marges sur n'importe quel élément de la grille de bootstrap est susceptible de créer des éléments débordants à un certain point à des largeurs d'écran inférieures.
si cela se produit, n'oubliez pas d'utiliser les requêtes css media et n'incluez que les marges à la largeur de l'écran qui peuvent le gérer.
en accord avec l'approche mobile-first du cadre dans lequel vous travaillez (bootstrap), il est préférable d'ajouter le rembourrage à des largeurs qui peuvent le supporter, plutôt que en l'excluant à des largeurs qui ne peuvent pas.
@media (min-width: 992px){
.navbar li {
margin-left : 1em;
margin-right : 1em;
}
}
à partir de Bootstrap 4, Vous pouvez utiliser le espacement des utilitaires.
Ajouter par exemple px-2 dans les classes de l' nav-item pour augmenter la marge.