3

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");    
 }

しかし、何もありません。何か案は ？

4

2 に答える 2

1

このスタイリングは私にとってはかなりうまくいきました：

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

メインメニューとログインエリアメニューの左右の境界線を魔法のように覆います。

于 2014-04-08T10:00:12.350 に答える
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)。

于 2013-10-18T11:28:15.973 に答える