更改垂直分隔線導航欄

Question

我正嘗試在Bootstrap中更改垂直分隔線類的背景圖像。 我有這樣的菜單：

<div class="navbar"> 
    <div class="navbar-inner"> 
      <a class="brand" href="#"></a> 
      <ul class="nav"> 
       <li class="active"><a href="#">Nosotros</a></li> 
       <li class="divider-vertical"></li> 
       <li><a href="#">Servicios</a></li> 
       <li class="divider-vertical"></li> 
       <li><a href="#">Galer&iacute;a de fotos</a></li> 
       <li class="divider-vertical"></li> 
       <li><a href="#">Contacto</a></li> 
      </ul> 
    </div> 
</div> 

在我的CSS我嘗試：

.navbar .nav .divider-vertical{ 
    background-image: url("img/nav-div.jpg");  
} 

但一無所獲。有任何想法嗎 ？

Answer 1

這是因爲其內部寬度爲0，因爲只有利潤加起來外寬：

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

您需要內部寬度增加了，例如

.navbar .nav .divider-vertical{ 
    width: 20px; 
    background-image: url("img/nav-div.jpg");  
} 

您可能需要降低元素的邊緣，以補償增加的寬度（如果你需要.divider-vertical留20px寬度）。

Answer 2

這種造型非常適合我的工作：

<style> 
    .navbar-nav > li {border-right: 1px solid #666;} 
    .navbar-nav {border-left: 1px solid #666;} 
</style> 

它奇蹟般地覆蓋了主菜單和登錄區菜單的左右邊界。