10 Bootstrap navbar bölücüleri eşit aralıklarla yerleştirin

Question

Gezinme çubuğundaki dikey ayırıcıları eşit aralıklarla nasıl ayırıyoruz?

Şu anda kullandığınız HTML ve CSS'im.

HTML:

<li class="divider-vertical"><a href = "#">Contact Us</a></li> 

CSS:

.divider-vertical { 
height: 50px; 
margin: 0 9px; 
border-left: 1px solid #F2F2F2; 
border-right: 1px solid #FFF; 
} 

Navbar'ı kodu:

<nav class="navbar navbar-default navbar-static-top" role="navigation"> 
     <div class="navbar-header"> 
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse"> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      </button> 
     </div> 

     <div class="collapse navbar-collapse navHeaderCollapse"> 
      <ul class="nav navbar-nav"> 
      <li><a href = "#">Home</a></li> 
      <li class="divider-vertical"><a href = "#">About</a></li> 
      <li class="divider-vertical"><a href = "#">Jobs</a></li> 
      <li class="divider-vertical"><a href = "#">Contact Us</a></li> 
      <li class="divider-vertical"><a href = "#">Resources</a></li> 
      </ul> 
     </div> 
    </nav> 

Answer 1

sonra olan etkiyi elde etmek için çeşitli yolları vardır. İşte sorununuzu çözecek ve ihtiyacınız olan sonucu verecek hızlı bir düzeltme. margin kullanın HTML

Stil senin .li öğelerini .divider-vertical sınıf çıkarın

1. : Size küçük bir html yazma kurtaracağını

   .divider-vertical { 
   height: 50px; 
   margin: 0 0 0 9px; 
   padding: 0 0 0 9px; 
   border-left: 1px solid red; 
   } 
   

   Daha iyi bir yaklaşım aşağıdaki gibi bir şey yapmak olacaktır ve ile aynı taraftaki padding - bu durumda sağdaki

2. bazı css att'i kaldırmak için Pseudo sınıf :last-child kullanacağız Geçen menü öğesinden ributes

li { 
 
    border-right: 1px solid red; 
 
    margin: 0 9px 0 0; 
 
    padding: 0 9px 0 0; 
 
} 
 

 
li:last-child { 
 
    border-right: none; 
 
}

<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/> 
 
<nav class="navbar navbar-default navbar-static-top" role="navigation"> 
 
     <div class="navbar-header"> 
 
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse"> 
 
      <span class="icon-bar"></span> 
 
      <span class="icon-bar"></span> 
 
      <span class="icon-bar"></span> 
 
      </button> 
 
     </div> 
 

 
     <div class="collapse navbar-collapse navHeaderCollapse"> 
 
      <ul class="nav navbar-nav"> 
 
      <li><a href = "#">Home</a></li> 
 
      <li><a href = "#">About</a></li> 
 
      <li><a href = "#">Jobs</a></li> 
 
      <li><a href = "#">Resources</a></li> 
 
      </ul> 
 
     </div> 
 
    </nav>

Answer 2

bu bir göz atın. Stil vermek için divider-vertical sınıfını Home<li> etiketine ekledim.

JSFiddle

HTML

<div class="collapse navbar-collapse navHeaderCollapse"> 
     <ul class="nav navbar-nav"> 
     <li class="divider-vertical"><a href = "#">Home</a></li> 
     <li class="divider-vertical"><a href = "#">About</a></li> 
     <li class="divider-vertical"><a href = "#">Jobs</a></li> 
     <li class="divider-vertical"><a href = "#">Resources</a></li> 
     </ul> 
    </div> 
</nav> 

CSS

.divider-vertical { 
    height: 50px; 
    width:100px; 
    margin: auto; 
    border-left: 1px solid black; 
    border-right: 1px solid red; 
    text-align:center; 
} 

Answer 3

Aşağıdakine CSS değiştirmeniz gerekir:

.divider-vertical { 
    height: 50px; 
    border-left: 1px solid #F2F2F2; 
    border-right: 1px solid #FFF; 
} 

Sen 9PX için ayarlanan sol ve sağda marjı vardı.

ekstra boşluk kullanımını isterseniz: yerine

padding: 0 9px; 

. here bir çalışma örneğidir, ancak önyüklemenizi jsfiddle'ın varsayılan genişliğinde bir navicon'a dönüştürdüğünden beri paneli görmek için sonucu genişletmeniz gerekir.