如何在bootstrap中有一个导航栏拆分按钮下拉组件？

我使用bootstrap（v2），我从http://twitter.github.com/bootstrap/components.html#dropdowns可以看到“分割按钮下拉菜单”。如何在bootstrap中有一个导航栏拆分按钮下拉组件？

在导航栏，你可以有下拉菜单

然而，它并不像您可以在导航栏的分裂下拉。我想要使用它的是登录用户的名字旁边有脱字符号。点击用户名可以进入用户页面，但插入符号会显示一个下拉菜单，并显示“退出”等操作。

这可能吗？

来源

2012-12-07 MrPurpleStreak

这就是我的意思。顶部栏中的插入符号和按钮是分开的，在最下面的一个中，我使用“正常”按钮。 http://jsfiddle.net/musmuris/R3JKz/10/ 这些看起来都不错正确 – MrPurpleStreak

可能的重复[导航栏3的导航栏拆分按钮下拉]（http://stackoverflow.com/questions/20539329/ navbar-split-button-dropdown-with-bootstrap-3） – Matyas

我不明白一年后问的问题可以重复吗？不过，我已经编辑指出，这是在4年前问的时候bootstrap v2！ – MrPurpleStreak

我修改了你的jsfiddle来做我想要的。将脱字符号放在自己的列表项中会在插入符号和用户名之间创建一个尴尬的空间。克服这个将需要一些覆盖。编辑：作为一个简单的例子，我使用了两个类去除两个元素之间的填充。尽管我不得不使用!important属性，但这不是最佳实践。 http://jsfiddle.net/R3JKz/15/

<li> 
<a href="#" class="caret-before"> 
    someuser 
</a> 
</li> 
<li class="dropdown">  
<a class="dropdown-toggle caret-after" data-toggle="dropdown"> 
    <b class="caret"></b> 
</a> 
    ... 
</li>

中还包含的jsfiddle是如何使用B标签作为触发的例子，而是因为它打破了布局此方法不会在引导导航栏工作。例如：

<li class="dropdown"> 
<a href="#" class="pull-left"> 
    A Dropdown Menu 
</a> 
<b class="caret pull-left dropdown-toggle" data-toggle="dropdown"> 
</b>

我希望这有帮助，不要犹豫，要求澄清。

来源

2012-12-07 18:21:47 eziegl

谢谢。是的 - 这就是我想要的。我会得出关于填充的相同结论，并尝试了相同的结论。问题在于，当鼠标悬停在位时，脱字符不会改变颜色 - 可能需要一些JS来修复它。我希望bootstrap会有这个内置的，我只是错过了它。好吧。再次感谢。 – MrPurpleStreak

这有一个主要缺点：在小屏幕上，插入符号将显示为自己的菜单项目，而不是“绑定”到用户项目。 – Fabian

如何在bootstrap中有一个导航栏拆分按钮下拉组件？

回答

相关问题