Changer l'espace entre chaque élément dans le Bootstrap barre de navigation

Comment puis-je créer un plus grand espace entre chaque lien sur ma barre de navigation, de sorte qu'ils sont plus éloignés?
Est-ce quelque chose que j'ai changer le CSS ou le HTML?
Voici comment j'ai mis en place 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>
  • Style = CSS ...
InformationsquelleAutor user2953989 | 2013-11-19
  1. 49

    Vous pouvez modifier ceci dans votre CSS avec la propriété padding:

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

    Vous pouvez également définir le margin

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

    Rappelez-vous juste que la modification de la marge ou de la marge sur toute bootstrap grille des éléments est susceptible de créer débordant d'éléments à un certain point au bas de l'écran-largeurs.

    Si cela arrive, n'oubliez pas d'utiliser les CSS media queries et incluent uniquement les marges à l'écran d'une largeur qui peut s'en occuper.

    En accord avec le mobile-première approche du cadre vous travaillez au sein d' (bootstrap), il est préférable d'ajouter le rembourrage sur des largeurs qui peut s'en occuper, plutôt que de l'exclure sur des largeurs qui ne le peuvent pas.

    @media (min-width: 992px){
    .navbar li {
        margin-left : 1em;
        margin-right : 1em;
    }
}
    • Excellent point là!
    InformationsquelleAutor Joe Sinfield
  3. 12

    De Bootstrap 4, vous pouvez utiliser le l'espacement des utilitaires.

    Ajouter par exemple px-2 dans les classes de la nav-item pour augmenter la marge.

    InformationsquelleAutor loopasam