在嵌入按钮组

Question

我在一组按钮中嵌套了一个下拉菜单，但是我在设置下拉菜单时看起来像主按钮有点麻烦。似乎应该有引导类来执行此操作而不使用css？

1. 我希望下拉项目在悬停时显示深色背景，就像主按钮悬停在上面一样。见下面的图片
2. 当点击主按钮时，看起来会有一些造型，当点击下拉菜单项时不会发生任何样式。
3. 我希望下拉列表中的类似文字为主要按钮

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

以下是我的代码，其中包含部分正常工作的Fiddle以及一些显示按钮组的图片，其中包含下拉列表我试图设置样式。

＆＃13;
＆＃13;
<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>
＆＃13;
＆＃13;
＆＃13;



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

Answer 1

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

以下是您为默认主题执行的操作：

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

Stack Snippet演示

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

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