Twitter Bootstrap的导航栏与拆分按钮

有没有（相当容易）的方式获得Twitter Bootstrap's navbar充满split button dropdowns？Twitter Bootstrap的导航栏与拆分按钮

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

我试图每每一个添加两个导航栏项 - 第一个仅含有主按钮（具有字幕和图标）和第二仅含有下拉（无字幕和图标）：

enter image description here

但是结果并不太好。这主要是因为：

只有一个（两个假装一个按钮）部分悬停鼠标，
有所谓主按钮及其假下拉之间的视觉天沟，
自举有一些小虫子（我认为），导致它不会将整个区域悬停在箭头下方，当某个项目缺少标题和图标时。

是否有任何其他选项，可能性或变通方法解决此问题？还是我期待太多？

来源

2013-07-03 trejder

Font Awesome页正好有，我一直在寻找因为不需要额外的代码或CSS。

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

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

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

来源

2013-07-04 13:29:49 trejder

感谢您指出Font Awesome的例子！我能够通过在Font Awesome的额外类中添加零边距来合理调整大小：'.navbar-nav> li.dropdown-split-left> a {0} {0} {0} {0} padding-right：0; margin-right：0; } .navbar-nav> li.dropdown-split-right> a { padding-left：7px; margin-left：0; }' –

太好了！你为什么不把它作为一个全功能的答案？：> – trejder

我不明白你为什么想从下拉菜单中分离主按钮。它已经是单独的结构（通过按钮组类绑定）。我没有看到小错误。关于天沟.btn，.navbar .btn和.btn-navbar有不同的CSS规则。对于徘徊在按钮和下拉一次添加/删除多余的CSS类，并添加此对了mouseenter和鼠标离开，请参阅：http://bootply.com/66352悬停

额外的CSS规则.btn-危险按钮：

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

悬停所有按钮/下拉菜单与.btn-危险级：

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

来源

2013-07-03 13:23:08

谢谢，为解决方案！你的问题的答案（“_Why split？_”）很明显（至少对我来说）。我有一个媒体列表，主要访问过的页面，以及一些与媒体相关的操作（如添加，转换，查看统计信息等），并不经常使用。我主要使用选项（媒体列表）通过直接点击来访问，而不常见的功能在下拉菜单中被隐藏。我不希望用户点击导航栏项目并从下拉列表中选择“列表”，每次他们想要进入列表（非常经常使用的操作）。 – trejder

答案可能会更简单：为什么要使用拆分按钮下拉菜单？原因完全一样，只有我想在导航栏中使用它。 – trejder

Twitter Bootstrap的导航栏与拆分按钮

回答

相关问题