**简介：**我的网站的一个部分需要一个小工具栏，其中有两个并排的下拉菜单。我尝试通过以下标记（简化）来实现这一点：
<div class="btn-group">
<button class="btn btn-mini dropdown-toggle" data-toggle="dropdown">
<span id="uniqueId">Text1</span> <span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a onclick="javascript:someFunction()">Item1</a></li>
<li><a onclick="javascript:someFunction()">Item2</a></li>
...
</ul>
<button class="btn btn-mini dropdown-toggle" data-toggle="dropdown">
<span id="uniqueId2">Text2</span> <span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a onclick="javascript:someOtherFunction()">Item1</a></li>
<li><a onclick="javascript:someOtherFunction()">Item2</a></li>
...
</ul>
</div>我想得到一个好看的两个按钮的工具栏圆角只在工具栏的外侧。
问题：
当我点击其中一个按钮时，两个按钮都显示为“按下”，我无法从视觉上区分我刚刚点击了哪个按钮。所有其他功能都工作正常-即菜单正确显示，选项正确。
有没有办法让这些按钮分别改变它们的样式？
更新日期：
我确实知道，通过将我的按钮拆分成两个btn-group或者（如@Sherbrow所建议的）通过使用divs，很有可能使其工作。
具有下拉式功能表的按钮必须个别 Package 在. btn工具列内其自己的. btn群组中，才能正确呈现。
我想知道-有没有可能以某种方式避免这种单独的 Package ，并在一个btn组中有两个行为正常的下拉菜单？
我想我问的是相当不标准和无文件记录的行为，我会接受一个答案“这是不可能的”，如果没有人可以建议一种方法来做到这一点。
4条答案
按热度按时间00jrzges1#
你忘了你的
.dropdownPackage 。更新2：我忘记了一些组的代码。并创建了一个gist (github)
更新：我做了一个更好的 Package ，和造型像按钮。这基本上是另一个按钮式的造型，但没有行李的
.btn类。具有较大的CSS调整（按钮.更少和按钮组.更少重复使用，将
.btn从here (github)改变为.dropdown-btn）：Live demo (jsfiddle)
Live demo (jsfiddle) updated
Live demo(jsfiddle) updated 2
PS：不要尝试版本3或4...
am46iovg2#
或者，您可以只向btn-group div添加一个CSS类，然后执行以下操作：
http://jsfiddle.net/plankmeister/JsPcg/
于飞：
CSS：
这可以处理按钮组中任意数量的按钮，但是只有第一个和最后一个按钮会被正确呈现。你可以使用一些CSS-fu来修复它，但是它在IE〈10的情况下无法呈现。
k7fdbhmy3#
在btn-group div中添加每一个集合对我来说很有用。现在两个唐斯都出现在同一行上，并正确打开相关的菜单选项。只需确保每个集合的id是唯一的。（SP 2016 OnPrem）
bprjcwpo4#
您可以使用
id和aria-labelledby属性，如here所述