twitter-bootstrap - 带有拆分按钮的 Twitter Bootstrap 导航栏

Question

是否有任何(相当简单的)方法来获得 Twitter Bootstrap's navbar充满了split button dropdowns ？

我正在寻找任何方法将所谓的主按钮与包含属于该主按钮或以某种方式与之相关的项目的下拉菜单分开。

我尝试为每个添加两个导航栏项目——第一个仅包含主按钮(带有标题和图标)，第二个仅包含下拉列表(没有标题和图标):

但结果不太令人接受。主要是因为:

• 只有一个部分(两个假装一个按钮)被鼠标悬停，
• 在所谓的主按钮和它的假下拉菜单之间有一个视觉槽，
• Bootstrap 有一些小错误(我认为)，导致它在项目缺少标题和图标时不会将整个区域悬停在向下箭头下方。

这个问题是否有任何其他选择、可能性或解决方法？还是我期望过高？

Answer 1

我不明白你为什么要从下拉列表中拆分主按钮。它已经是单独的结构(由按钮组类绑定(bind))。我没有看到小 bug 。关于gutter .btn，.navbar .btn 和.btn-navbar 有不同的css 规则。要在按钮和下拉菜单上悬停一次添加/删除额外的 css 类并将其添加到 mouseenter 和 mouseleave 上，请参阅:http://bootply.com/66352

悬停在 .btn-danger 按钮上的额外 css 规则:

.buttonhover-danger
{
  color: #ffffff;
  background-color: #bd362f;
  background-image: none;
  *background-color: #a9302a;
}

用 .btn-danger 类悬停所有按钮/下拉菜单:

$('.btn-danger').mouseenter(function(){$('.btn-danger').addClass('buttonhover-danger')});
$('.btn-danger').mouseleave(function(){$('.btn-danger').removeClass('buttonhover-danger')});