更改垂直分隔线导航栏 [英] Change vertical divider navbar

问题描述

我正在尝试在Bootstrap中更改垂直分隔线类的背景图像. 我有这个菜单:

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>

在CSS中，我尝试:

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

但是什么也没有.有什么想法吗?

But nothing. Any ideas ?

推荐答案

此样式对我非常有用:

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

这篇关于更改垂直分隔线导航栏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！