twitter-bootstrap - 更改垂直分隔线导航栏

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 宽度)。