Ändern des Abstands zwischen den einzelnen Elementen in der Bootstrap-Navigationsleiste

Wie kann ich einen größeren Abstand zwischen den einzelnen Links in meiner Navigationsleiste erstellen, damit sie weiter voneinander entfernt sind? Ändere ich etwas am CSS oder HTML? So habe ich meine Navigationsleiste in HTML implementiert:

<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>

Sie können dies in Ihrem CSS mit der Eigenschaft ändern padding:

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

Auch Sie können einstellen margin

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

Ab Bootstrap 4 können Sie die verwenden Abstand Dienstprogramme.

Fügen Sie zum Beispiel hinzu px-2 in den Klassen der nav-item um die Polsterung zu erhöhen.

Denken Sie nur daran, dass das Ändern der Polsterung oder der Ränder an Bootstrap-Rasterelementen wahrscheinlich irgendwann zu überlaufenden Elementen bei niedrigeren Bildschirmbreiten führt.

Denken Sie in diesem Fall daran, CSS-Medienabfragen zu verwenden und nur die Ränder bei Bildschirmbreiten einzubeziehen, die damit umgehen können.

In Übereinstimmung mit dem Mobile-First-Ansatz des Frameworks, in dem Sie arbeiten (Bootstrap), ist es besser, die Polsterung in Breiten hinzuzufügen, die damit umgehen können, anstatt sie in Breiten auszuschließen, die dies nicht können.

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

In Bezug auf Bootstrap lautet die richtige Antwort using Abstand Dienstprogramme wie von loopasam in einem früheren Kommentar erwähnt. Im Folgenden finden Sie ein Beispiel für die Verwendung von Padding für links und rechts.

<a href="#" class="nav-item nav-link px-3">Blog</a>

Ich würde vorschlagen, dass Sie sie einfach gleichmäßig verteilen, wie in dieser Antwort hier gezeigt

.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 */
}

Ich hatte zwei Schaltflächen (Bootstrap 4), die direkt in einer Navigationsleiste ausgerichtet waren, und ich wollte nicht an CSS / Stilen usw. basteln, also habe ich eine deaktivierte Schaltfläche zwischen den beiden Schaltflächen erstellt und es funktionierte wie ein Zauber:

<button class="btn btn-primary float-right">Make Active</button>
<button class="btn float-right" disabled>&nbsp;</button>
<button class="btn btn-success float-right">Send Proforma</button>