Changement diviseur vertical barre de navigation

Je suis en train de changer l'image de fond de diviseur vertical de la classe, dans le Bootstrap.
J'ai ce 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>

Dans mon css j'ai essayer:

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

Mais rien. Des idées ?

OriginalL'auteur ramiromd | 2013-06-28

  1. 1

    C'est parce que sa largeur intérieure est de 0, comme seuls les marges d'ajouter jusqu'à largeur externe:

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

    Vous devez ajouter la largeur intérieure, par exemple

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

    Vous aurez probablement besoin de réduire les marges de l'élément pour compenser la largeur additionnelle (si vous avez besoin d' .divider-vertical pour rester 20px largeur).

    OriginalL'auteur SavaMinic

  2. 1

    Ce style assez bien fonctionné pour moi:

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

    La magie couvre les bordures gauche et droite du menu principal et la zone de connexion menu.

    OriginalL'auteur wilburlikesmith