Zentrieren einer Navbar UL (ungeordnete Liste) mit Bootstrap 4 auf OSX

Question

Hmm, ich kann nicht scheinen, diese alleine herauszufinden. Ich arbeite mit der Navbar und kann bestimmte Dinge auf der Seite nicht zentrieren. Ich habe bereits '.container' auf 'nav .navbar' angewendet und die 'max-width' gesetzt, um zu steuern, wo die "Marke" ausgerichtet ist. Aber, ich habe Probleme mit der Zentrierung "Home | Link | Deaktiviert | Dropdown" in der Mitte der Seite.

Ich habe versucht:

‘.text-center’ on the li tags, inline 
and: 
li { 
    text-align: center; 
} 

‘justify-content-center’ on ul tag, inline 
and 
.ul { 
     justify-content: center; 
    } 

Put the ul inside: 
<div class="row"> 
    <div class="col text-center”> 

    </div> 
</div> 

Aber nichts davon funktioniert. Hier ist die Nav-Markup und CSS-Datei: HTML:

<nav class="navbar navbar-expand-md navbar-light bg-light fixed-top"> 
    <div class="container"> 
    <a class="navbar-brand" href="#">Brand Here</a> 
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation"> 
     <span class="navbar-toggler-icon"></span> 
    </button> 

    <div class="collapse navbar-collapse" id="navbarsExampleDefault"> 
     <!-- ul starts here --> 

     <ul class="navbar-nav mr-auto"> 
     <li class="nav-item active"> 
      <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> 
     </li> 
     <li class="nav-item"> 
      <a class="nav-link" href="#">Link</a> 
     </li> 
     <li class="nav-item"> 
      <a class="nav-link disabled" href="#">Disabled</a> 
     </li> 
     <li class="nav-item dropdown"> 
      <a class="nav-link dropdown-toggle" href="http://example.com" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a> 
      <div class="dropdown-menu" aria-labelledby="dropdown01"> 
      <a class="dropdown-item" href="#">Action</a> 
      <a class="dropdown-item" href="#">Another action</a> 
      <a class="dropdown-item" href="#">Something else here</a> 
      </div> 
     </li> 
     </ul> 

     <!-- ul ends here --> 
     </div> 
    </div><!-- container placed within <nav> tag --> 
    </nav> 

Sass/CSS

body { 
    padding-top: 56px; 

    nav .container { 
    max-width: 1374px; 

    .navbar-brand { 
     color: $blue-text !important; 
    } 

    .ul { 
     justify-content: center; 
    } 
    } 
} 

Jede Hilfe würde geschätzt. TIA

Answer 1

Dank ist, haben mich Sie auf dem richtigen Weg. Ich habe deine Lösung wörtlich in meiner Sass-Datei versucht, aber aus irgendeinem Grund hat es nicht funktioniert. Dann habe ich gerade hinzugefügt:

body { 
    padding-top: 56px; 

    nav .container { 
    max-width: 1374px; 

    .navbar-brand { 
     color: $blue-text !important; 
    } 
    /* added from your solution */ 
    .navbar-nav { 
     flex-grow: 1; 
     justify-content: center; 
    } 
    } 
} 

Answer 2

Um den Inhalt der Navigationsleiste im Bootstrap V4 zu zentrieren, verwenden Sie flex-grow: 1;, damit das Element um 100% erweitert werden kann, und justify-content: center; Eigenschaft, um das Element an der Mitte auszurichten.

@media (min-width: 992px){ 
.navbar-expand-lg .navbar-nav { 
     flex-grow: 1; 
     justify-content: center; 
    } 
    } 

Hier der Satheesh codepen demo link.