【问题标题】:Change vertical divider navbar更改垂直分隔导航栏
【发布时间】:2013-06-25 17:01:57
【问题描述】:

我正在尝试在 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");    
 }

但什么都没有。有什么想法吗?

【问题讨论】:

    标签: twitter-bootstrap navigation divider


    【解决方案1】:

    这种样式对我来说非常有用:

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

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

    【讨论】:

      【解决方案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 宽度)。

      【讨论】:

        猜你喜欢
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 2017-08-04
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        相关资源
        最近更新 更多