使bootstrap導航欄分隔線均勻間隔

我們如何使導航欄中的垂直分隔線均勻間隔開？使bootstrap導航欄分隔線均勻間隔

這是我目前使用的HTML和CSS。

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

導航欄代碼：

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

來源

2015-06-09 user3803747

你是什麼意思？你到底在找什麼？如果你設置每個分頻器的高度，那麼它將根據你設置的高度均勻間隔 – Mark

嗨，我想這樣的輸出：---->首頁|關於|聯繫<----但目前的輸出是這樣的：---> Home | *兩個標籤空間*關於*兩個標籤空間* |聯繫<--- – user3803747

你能發佈你的整個導航欄代碼嗎？ – Mark

有幾種方法可以實現你後的效果。這是一個快速解決方案，可以解決您的問題併爲您提供所需的結果。

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

一個更好的方法，它能夠節省您的HTML寫作是做類似如下：

從HTML中刪除您.divider-vertical類
風格你.li元素，使用margin和padding與border位於同一側 - 在這種情況下，右邊的
我們將使用僞類:last-child刪除一些css att從最後一個菜單項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>

來源

2015-06-09 03:18:48 matthewelsom

看看這個。我將divider-vertical類別添加到Home<li>標籤以賦予它樣式。

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

來源

2015-06-09 03:20:51 Mark

你需要你的CSS更改爲以下：

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

您在左邊和右邊設置爲9px有餘量。

如果你想額外的空間使用：

padding: 0 9px;

代替。 here是一個工作示例，但您需要使用結果拉伸面板才能看到它，因爲引導程序會將您的導航欄以jsfiddle的默認寬度製作成navicon。

來源

2015-06-09 03:21:44 HelloWorld

使bootstrap導航欄分隔線均勻間隔

回答

相關問題