web-dev-qa-db-fra.com

Changer l’espace entre chaque élément dans Bootstrap navbar

Comment puis-je créer un espace plus grand entre chaque lien de ma barre de navigation afin qu'ils soient plus éloignés? Est-ce quelque chose que je change le CSS ou HTML? Voici comment j'ai implémenté ma barre de navigation dans le code 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>
htmlcsstwitter-bootstrapnavbar
36
user2953989

Vous pouvez changer cela dans votre CSS avec la propriété padding:

.navbar-nav > li{
  padding-left:30px;
  padding-right:30px;
}

Aussi, vous pouvez définir margin

.navbar-nav > li{
  margin-left:30px;
  margin-right:30px;
}
53
DaniP

Rappelez-vous simplement que la modification du remplissage ou des marges sur tous les éléments de la grille bootstrap) est susceptible de créer des éléments débordants à un moment donné, à des largeurs d'écran inférieures.

Si cela se produit, n'oubliez pas d'utiliser les requêtes de média CSS et d'inclure uniquement les marges aux largeurs d'écran qui peuvent le gérer.

En accord avec l'approche mobile-first du framework dans lequel vous travaillez (bootstrap), il est préférable d'ajouter le rembourrage aux largeurs qui le gèrent, plutôt que de l'exclure aux largeurs qui ne le peuvent pas.

@media (min-width: 992px){
    .navbar li {
        margin-left : 1em;
        margin-right : 1em;
    }
}
27
Joe Sinfield

À partir de Bootstrap 4, vous pouvez utiliser les tilitaires d'espacement .

Ajouter par exemple px-2 dans les classes du nav-item pour augmenter le rembourrage.

15
loopasam

Je vous suggère de les espacer uniformément, comme indiqué dans cette réponse ici

.navbar ul {
  list-style-type: none;
  padding: 0;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  flex-wrap: nowrap; /* assumes you only want one row */
}
0
Rami Alloush