Wie zentriere ich Objekte der Navigationsleiste in einem Container mit voller Breite?

Question

Also ich versuche, eine Boostrap 4 Navbar zu machen, um in einen Container mit voller Breite zu passen, aber ich möchte Navigationsleiste Elemente zentriert werden, wie in einem normalen Container.

<div class="container-full"> 
 
    <nav class="navbar navbar-expand-lg position'navbar-dark bg-dark"> 
 
     <a class="navbar-brand" href="#">Navbar</a> 
 
     <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation"> 
 
      <span class="navbar-toggler-icon"></span> 
 
     </button> 
 
     <div class="collapse navbar-collapse" id="navbarNavAltMarkup"> 
 
      <div class="navbar-nav"> 
 
       <a class="nav-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a> 
 
       <a class="nav-item nav-link" href="#">Features</a> 
 
       <a class="nav-item nav-link" href="#">Pricing</a> 
 
       <a class="nav-item nav-link disabled" href="#">Disabled</a> 
 
      </div> 
 
     </div> 
 
    </nav> 
 
    </div>

Ich kann was nicht herausfinden, zu ändern.

Answer 1

Sie benötigen einen .Behälter innerhalb des nav-Element zu platzieren:

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.2/css/bootstrap.css" rel="stylesheet" /> 
 
<div class="container-full"> 
 
    <nav class="navbar navbar-expand-lg position'navbar-dark bg-dark"> 
 
    <div class="container"> 
 
     <a class="navbar-brand" href="#">Navbar</a> 
 
     <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation"> 
 
        <span class="navbar-toggler-icon"></span> 
 
       </button> 
 
     <div class="collapse navbar-collapse" id="navbarNavAltMarkup"> 
 
     <div class="navbar-nav"> 
 
      <a class="nav-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a> 
 
      <a class="nav-item nav-link" href="#">Features</a> 
 
      <a class="nav-item nav-link" href="#">Pricing</a> 
 
      <a class="nav-item nav-link disabled" href="#">Disabled</a> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </nav> 
 
</div>