centrum nieuporządkowana lista navbar - bootstrap 3

Question

Tak, próbuję wyśrodkować moje elementy listy na pasku nawigacyjnym. Ponieważ nie istnieje funkcja użyteczna dla tego zadania, wymyśliłem następujący kod, który umieszcza listę nieuporządkowaną w kolumnie w rzędzie. Ale lista jest nadal uzasadnione w lewo, nawet po Staram centrowania ze starym „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

byłem w stanie zrozumieć to na własną rękę. Nie wiem, czy to było najlepsze rozwiązanie:

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

I dodaje następujące style 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

Oto kod zrobiłem wczoraj, współpracuje z Bootstrap 3 RC1. Mam nadzieję, że to ci pomoże.

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

Daj mi znać, jeśli problem nadal występuje.

Edit: Usunięto niepotrzebne znaczniki

Answer 3

kroki wziąłem:

• Usuń float: left z listy i listy elementy
• Zamiast elementów listy należy użyć display: inline
• Ustaw linki do display: inline-block więc zachować ich wymiary blokowe
• Wystarczy dodać text-align: center do paska nawigacyjnego do centrum wszystkiego
• owijane w zapytaniu mediów tak pionową na telefon jest odporny

Wynikające CSS dodając .navbar-centered styl:

@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; 
    } 
} 

Zastosowanie stosując .navbar-centered styl NavBar:

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