Twitter bootstrap 如何在引导中使用导航栏拆分按钮下拉组件?

Twitter bootstrap 如何在引导中使用导航栏拆分按钮下拉组件?,twitter-bootstrap,Twitter Bootstrap,我使用的是bootstrap(v2),从中可以看到“拆分按钮下拉列表” 在导航栏中可以有下拉列表 然而,它看起来不像你可以在导航栏中有一个拆分下拉列表。我想使用它的目的是让登录用户的名字旁边有插入符号。单击用户名会带您进入该用户的页面,但插入符号会显示一个下拉列表,其中包含“注销”等操作 这可能吗?我修改了您的JSFIDLE,以满足您的要求。将插入符号放在它自己的列表项中会在插入符号和用户名之间产生尴尬的空间。要克服这一点,需要一些覆盖。编辑:作为一个简单的例子,我使用了两个类来删除两个元素之间

我使用的是bootstrap(v2),从中可以看到“拆分按钮下拉列表”

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

然而,它看起来不像你可以在导航栏中有一个拆分下拉列表。我想使用它的目的是让登录用户的名字旁边有插入符号。单击用户名会带您进入该用户的页面,但插入符号会显示一个下拉列表,其中包含“注销”等操作


这可能吗?

我修改了您的JSFIDLE,以满足您的要求。将插入符号放在它自己的列表项中会在插入符号和用户名之间产生尴尬的空间。要克服这一点,需要一些覆盖。编辑:作为一个简单的例子,我使用了两个类来删除两个元素之间的填充。我不得不使用
!重要的
属性,但这不是最佳做法。


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

    这就是我的意思。顶栏上的插入符号和按钮是分开的,在底部我使用一个“正常”按钮。这两个问题看起来都不太对,可能是重复的,我不明白一年后提出的问题怎么可能是重复的?然而,我已经编辑指出,这是4年前询问时的bootstrap v2!谢谢是的,这就是我想要的。关于填充,我得出了相同的结论,并尝试了相同的方法。问题是,当你将鼠标悬停在插入符号的位上时,插入符号的颜色不会改变——可能需要一点JS来解决这个问题。我希望bootstrap会内置这个,但我错过了。哦,好吧。再次感谢。这有一个主要缺点:在小屏幕上,插入符号将显示为自己的菜单项,而不是“绑定”到用户项。
    <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>
    
    <li class="dropdown">
     <a href="#" class="pull-left">
      A Dropdown Menu
     </a>
     <b class="caret pull-left dropdown-toggle" data-toggle="dropdown">
     </b>