Twitter Bootstrap导航栏，带有分离按钮

Question

是否有任何（相当简单的）方式让Twitter Bootstrap's navbar充满split button dropdowns？

我正在寻找任何方法将所谓的主按钮从包含属于主按钮的项目的下拉菜单中分离出来，或者以某种方式与之相关。< / p>

我尝试为每个添加两个导航栏项目 - 首先只包含主按钮（带有标题和图标），第二个只包含下拉列表（没有标题和图标）：

但结果不太可接受。主要是因为：

• 只有一部分（两个假装的一个按钮）用鼠标悬停，
• 所谓的主按钮与其假下拉列表之间存在视觉上的沟槽，
• Bootstrap有一些小错误（我认为），当项目缺少标题和图标时，导致它不会将整个区域悬停在向下箭头下方。

此问题还有其他选项，可能性或解决方法吗？或者我期待太多了？

Answer 1

我不明白你为什么要从下拉菜单中拆分主按钮。它已经是单独的结构（由按钮组类绑定）。我没有看到小虫子。关于排水沟.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')});

Answer 2

Font Awesome页面完全是我一直在寻找的内容，而无需添加额外的代码或CSS。

我正在努力使用“图标”和“示例”按钮，它们是完美的分割按钮下拉菜单，即可以单击按钮，您可以打开它旁边的下拉列表，而无需触摸主按钮。

但是，这是通过单独的元素完成的，这意味着主按钮和下拉箭头之间有很大的空间。

Here is一个Bootply示例，它复制了此代码和此行为。