更改垂直分隔线导航栏

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> 

它奇迹般地覆盖了主菜单和登录区菜单的左右边界。