1

以下のように、li クラスを上書きして Bootstrap ドロップダウン リストをカスタマイズしようとしていますが、うまくいきません。ここにも例があります

<ul class="dropdown-menu">
 <li><a tabindex="-1" href="#">Action</a></li>
 <li><a tabindex="-1" href="#">Another action</a></li>
 <li><a tabindex="-1" href="#">Something else here</a></li>
 <li class="divider"></li>
 <li><a tabindex="-1" href="#">Separated link</a></li>
</ul>

そしてCSSは

.dropdown-menu li: hover {
   background-color:#CCC;
  }

li(s) 間にスペースを追加する方法はありますか?

ありがとう

4

3 に答える 3

1

主な問題は特異性と、表示される背景色:hoverが実際には線形グラデーションであるという事実です。これを変更するには、より具体的なセレクターを使用する必要があります。

.container .dropdown-menu li a:hover {
background-color: peru;
background-image: none; /* to disable the gradient */
}

http://jsfiddle.net/AXwga/5/

于 2013-05-29T03:54:19.043 に答える
0 
.dropdown-menu li{
   padding: 5px 0;
}
or
.dropdown-menu li{
   line-height:25px;
}
于 2013-05-29T03:53:14.160 に答える
0

デフォルトの色と垂直パディングを変更するには、bootstrap.css ファイルのこのエントリを編集します。

.dropdown-menu > li > a {
    clear: both;
    color: #333333;
    display: block;
    font-weight: normal;
    line-height: 20px;
    padding: 3px 20px;
    white-space: nowrap;
}

変更する必要がある一致するホバーもあります。

編集：Bootstrapファイルで、これを探します：

.dropdown-menu li > a:hover,
.dropdown-menu li > a:focus,
.dropdown-submenu:hover > a {
  text-decoration: none;
  color: #ffffff;
  background-color: #0081c2;
  background-image: -moz-linear-gradient(top, #0088cc, #0077b3);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0077b3));
  background-image: -webkit-linear-gradient(top, #0088cc, #0077b3);
  background-image: -o-linear-gradient(top, #0088cc, #0077b3);
  background-image: linear-gradient(to bottom, #0088cc, #0077b3);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0088cc', endColorstr='#ff0077b3', GradientType=0);
}
于 2013-05-29T03:46:09.330 に答える