twitter-bootstrap - 你怎么能在引导程序中有一个导航栏拆分按钮下拉组件？

Question

我正在使用引导程序（v2），我从http://twitter.github.com/bootstrap/components.html#dropdowns看到您可以拥有“拆分按钮下拉菜单”。

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

但是，您似乎不能在导航栏中有拆分下拉菜单。我想要使​​用它的目的是让登录用户的名称旁边带有插入符号。单击用户名会将您带到该用户的页面，但插入符号会显示一个下拉菜单，其中包含“退出”等操作。

这可能吗？

Answer 1

我修改了你的 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>

我希望这会有所帮助，请随时要求澄清。