Change vertical divider navbar

问题:

I'm trying to change the background image of vertical divider class, in Bootstrap. I have this menu:

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

In my css I try:

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

But nothing. Any ideas ?

回答1:

That's because its inner width is 0, as only margins add up to outer width:

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

You need to add the inner width to it, e.g.

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

You will probably need to lower the margins of the element to compensate for the added width (if you need .divider-vertical to stay 20px width).

回答2:

This styling pretty much worked for me:

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

It magically covers the left and right borders of the main menu and the login area menu.