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

您想在 bootstrap.css 文件中编辑此条目以更改默认颜色和垂直填充：

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

还有一个匹配的悬停你应该改变。

编辑：在引导文件中，寻找这个：

.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 回答
0 
.dropdown-menu li{
   padding: 5px 0;
}
or
.dropdown-menu li{
   line-height:25px;
}
于 2013-05-29T03:53:14.160 回答