样式化嵌套在按钮组中的 bootstrap 下拉菜单

Question

我在一组按钮中嵌套了一个下拉菜单，但我在将下拉菜单样式设置为看起来像主按钮时遇到了一些问题。似乎应该有 bootstrap 类来做到这一点而不使用 css?

我希望下拉项在悬停时显示深色背景，就像悬停在主按钮上一样。见下图
当主按钮被点击时看起来也有一些样式，当下拉菜单项被点击时没有样式发生。
我希望下拉菜单中的文本与主要按钮相似

我只是想让事情看起来一致。

这是我的代码，部分工作 Fiddle 和一些显示我正在尝试设置样式的下拉按钮组的图片。

<div class="btn-group btn-group-lg" role="group" aria-label="...">
    <button type="button" class="btn btn-default">House</button>
    <button type="button" class="btn btn-default">Apartment</button>
    <button type="button" class="btn btn-default">Studio</button>
    <div class="btn-group btn-group-lg" role="group">
        <button type="button" class="btn btn-default dropdown-toggle" 
                data-toggle="dropdown" aria-expanded="false">
            Other <span class="caret"></span>
        </button>
        <ul class="dropdown-menu" role="menu">
            <li><a>Park</a></li>
            <li><a>Beach</a></li>
            <li><a>Field</a></li>
            <li><a>BackYard</a></li>
            <li><a>FrontYard</a></li>
            <li><a>Other</a></li>
        </ul>
    </div>
</div>

悬停在下拉菜单项上时不突出显示。

Answer 1

下拉菜单选项非常简单。如果您想调整悬停效果的阴影，您可以添加自己的 CSS 以匹配您使用的任何主题。

默认主题的操作方法如下：

.btn-group .dropdown-menu li:hover a {
  color: #333;
  background-color: #E6E6E6;
  border-color: #ADADAD;
}

堆栈代码段中的演示

.btn-group .dropdown-menu li:hover a {
  color: #333;
  background-color: #E6E6E6;
  border-color: #ADADAD;
}

<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css" rel="stylesheet"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.js"></script>

<div class="btn-group btn-group-lg" role="group" aria-label="...">
  <button type="button" class="btn btn-default">House</button>
  <button type="button" class="btn btn-default">Apartment</button>
  <button type="button" class="btn btn-default">Studio</button>
  <div class="btn-group btn-group-lg" role="group">
    <button type="button" class="btn btn-default dropdown-toggle" 
            data-toggle="dropdown" aria-expanded="false">
      Other <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" role="menu">
      <li><a>Park</a></li>
      <li><a>Beach</a></li>
      <li><a>Field</a></li>
      <li><a>BackYard</a></li>
      <li><a>FrontYard</a></li>
      <li><a>Other</a></li>
    </ul>
  </div>
</div>

Answer 2

只需将这些添加到 css 文件中即可在悬停时获得背景颜色..

a:link {
    text-decoration:none;
    color:#2E3D4C;
    font-weight: bold;
}
li a:hover {
    color:#2E3D4C;
    background-color:#C2E0FF;
}
ul.menu li ul {
    visibility:hidden;
}
ul.menu li:hover ul {
    visibility:visible;
}
ul.menu ul li:hover {
    background-color:#6B8FB2;
}
li a:link {
    display: block;
    padding: 0px;
    margin:1px;
}

样式化嵌套在按钮组中的 bootstrap 下拉菜单

Styling a bootstrap drop down nested in a button group

html

twitter-bootstrap

drop-down-menu

堆栈代码段中的演示