你怎么能在bootstrap中有一个navbar split button下拉组件?

时间:2012-12-07 17:13:38

标签: twitter-bootstrap

我正在使用bootstrap(v2),我从http://twitter.github.com/bootstrap/components.html#dropdowns看到你可以拥有“Split Button Dropdown”。

在导航栏中,您可以有下拉列表

然而,看起来您可以在导航栏中分割下拉菜单。我想要使​​用的是将登录用户的名称与其旁边的插入符号一起使用。单击用户名会将您带到用户的页面,但是插入符将显示“退出”等操作的下拉列表。

这可能吗?

1 个答案:

答案 0 :(得分:4)

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

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