Center ungeordnete Liste navbar - bootstrap 3

Question

Also, ich versuche, meine Nav-bar-Liste Elemente zu zentrieren. Da für diese Aufgabe keine Dienstprogrammfunktion vorhanden ist, habe ich den folgenden Code entwickelt, der die ungeordnete Liste in einer Spalte innerhalb einer Zeile platziert. Aber die Liste ist noch gerechtfertigt die noch übrig, nachdem ich mit dem alten versuchen Zentrierung ‚text-align: center‘

<div class="navbar navbar-fixed-top "> 
    <!--<a class="navbar-brand" href="#">Title</a> --> 
    <div class= "row"> 
     <div style="border:1px solid black;text-align:center;" class="col-4 col-offset-4"> 
      <ul class="nav navbar-nav"> 
       <li class="active"><a href="/">Home</a></li> 
       <li><a href="#">About</a></li> 
       <li><a href="#">Projects</a></li> 
       <li><a href="#">Contact</a></li> 
      </ul> 
     </div> 
    </div> 
</div> 

Answer 1

konnte ich das alleine herauszufinden. Nicht sicher, ob es die beste Lösung:

 <div class="navbar navbar-fixed-top">     
        <div style="border:1px solid black" class="container"> 
      <div class="inner-nav"> 
       <!--<a href="#" class="navbar-brand">Title</a> --> 
       <ul class="nav navbar-nav"> 
        <li class="active"><a href="/" >Home</a></li> 
        <li><a href="#" >About</a></li> 
        <li><a href="#" >Projects</a></li> 
        <li><a href="#" >contact</a></li> 
       </ul> 
      </div> 
        </div>     
      </div> 

Ich habe dann die folgenden Stile bootstrap.css:

/* ADDED for centering navbar items */ 
.navbar .inner-nav ul { 
position:relative;left:50%;float:left;margin-right:0;margin-left:0; 
} 

/* ADDED for centering navbar items */ 
.navbar .inner-nav li { 
position:relative;right:50%;float:left;margin:0;list-style:none 
} 

Answer 2

Hier ist der Code, den ich gestern getan habe, funktioniert gut mit Bootstrap 3 RC1. Hoffe das wird dir helfen.

   <nav class="navbar navbar-fixed-top">     
         <div class="container">       
          <a href="#" class="navbar-brand">Title</a> 
          <ul class="nav navbar-nav"> 
           <li class="active"><a href="#" >Home</a></li> 
           <li><a href="#" >Services</a></li> 
          </ul>                   
         </div>     
       </nav>    

Lassen Sie mich wissen, wenn das Problem immer noch da ist.

Edit: entfernt unnötige Markup

Answer 3

Schritte Ich nahm:

• entfernen float: left aus der Liste und die Liste Elemente
• Verwenden Sie stattdessen display: inline für Listenelemente
• Set Links zu display: inline-block so halten sie ihre Blockdimensionen
• Einfach text-align: center zum navbar hinzufügen alles auf mobilen
• Wrap in Medien Abfrage so vertikale Liste zum Zentrum ist nicht betroffen

Resultierende CSS Hinzufügen eines .navbar-centered Stil:

@media (min-width: 768px) { 
    .navbar-centered .navbar-nav { 
     float: none; 
     text-align: center; 
    } 
    .navbar-centered .navbar-nav > li { 
     float: none; 
    } 
    .navbar-centered .nav > li { 
     display: inline; 
    } 
    .navbar-centered .nav > li > a { 
     display: inline-block; 
    } 
} 

Verwendung durch die Anwendung .navbar-centered Stil navbar:

<div class="navbar navbar-default navbar-centered" role="navigation"> 
    ... 
</div>