更改垂直分隔符导航栏

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

但是什么都没有。有任何想法吗？

- ramiromd

Answer 1

这个样式对我来说基本上起作用了：

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

它神奇地覆盖了主菜单和登录区域菜单的左右边框。

- wilburlikesmith

Answer 2

这是因为它的内部宽度为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宽度）。

- SavaMinic