merkezi sırasız liste navbar - önyükleme 3

Question

Böylece, nav-bar listem öğelerini ortalamaya çalışıyorum. Bu görev için bir yardımcı işlev olmadığından, sırasız listeyi bir satırdaki bir sütuna yerleştiren aşağıdaki kodu geliştirdim. ': Merkezini text-align İşte

<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

başıma bu anlamaya başardı. Değil emin iyi çözüm olsaydı:

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

Sonra bootstrap.css için aşağıdaki stilleri eklendi:

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

I dün yaptı kodu, işleri gayet Bootstrap 3 RC1 ile sola Ama liste eski Merkezlemeyi deneyin sonra bile hala haklı. Umarım bu size yardımcı olur. Sorun hala varsa, bana bildirin.

Düzenleme: kaldırıldı gereksiz biçimlendirme

Answer 3

Adımlar aldım:

• listesi ve listeden float: left kaldır öğeler
• yerine display: inline kullanın display: inline-block olarak ayarlayın bağlantılar böylece onların blok boyutları
• Basitçe mobil medya sorgusu böylece dikey listede her şeyi
• Wrap merkezi Menü ye text-align: center eklemek tutmak bir .navbar-centered stil eklemek etkilenmemiş

Ortaya CSS:

.navbar-centered stili uygulayarak

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

Kullanım navbar için:

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