3

是否有任何（相当简单的）方法可以让Twitter Bootstrap 的导航栏充满拆分按钮下拉菜单？

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

我尝试为每个导航栏添加两个项目——第一个只包含主按钮（带标题和图标），第二个只包含下拉菜单（不带标题和图标）：

在此处输入图像描述

在此处输入图像描述

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

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

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

4

2 回答 2

3

我不明白你为什么要从下拉菜单中拆分主按钮。它已经是单独的结构（由按钮组类绑定）。我没有看到小错误。关于 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')});
于 2013-07-03T13:23:08.560 回答
3

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

我指的是“图标”和“示例”按钮，它们是完美的拆分按钮下拉菜单，即它可以作为单个按钮单击，您可以在它旁边打开下拉菜单，而无需触摸主按钮。

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

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

于 2013-07-04T13:29:49.260 回答