Twitter 引导拆分下拉菜单

Posted 2023-03-05

【中文标题】Twitter 引导拆分下拉菜单

【英文标题】：Twitter bootstrap split dropdown

【发布时间】：2013-06-02 12:50:52

【问题描述】：

我有一个导航栏，下拉菜单旁边有一个插入符号。

在当前代码中，如果用户单击Operations 文本或插入符号，则会打开下拉菜单。但我需要这个：

如果用户点击Operations链接，我希望用户转到我的/operations/页面。 如果用户单击插入符号，下拉菜单将可见。如果用户点击下拉菜单的元素之一，用户将被重定向到相关页面。

小提琴：http://jsfiddle.net/mavent/UtDqm/2/

<div class="navbar navbar-inverse">
  <li class="dropdown" id="myTools">
    <a class="dropdown-toggle" data-toggle="dropdown" href="#myTools">
        Operations
        <b class="caret"></b>
    </a>
    <ul class="dropdown-menu">
        <li><a href="/mypage1/">MyPage 1</a></li>
        <li><a href="/mypage2/">MyPage 2</a></li>
    </ul>
  </li>  
</div>   

在 Twitter 引导文档中记录了如何创建拆分按钮下拉列表here。我不想使用按钮。是否可以在不使用按钮的情况下进行拆分行为。只有链接？

【问题讨论】：

你为什么不把插入符号放在dropdown-toggle 中，然后在操作文本中添加一个普通的href？见here

@JoshuaM 的行为与 Stevie 的回答相同。这有效，但插入符号转到导航栏中的下一行。 image link

您是否将a 样式设置为display: block？这就是我能想到的，因为它works fine for me.

我的意思是，您的样式表中是否有类似a display: block 的样式定义？这可能会将插入符号向下推到下一个，因为围绕文本的两个 <a> 标签和插入符号被强制进入新行。有什么地方可以查看你的工作代码吗？

更新了我的答案，<a> 标签的引导样式是 display:block，正如 Joshua 所提到的。如果您将它们覆盖为 display:inline-block; 它可以工作。

【参考方案1】：

您不能将操作链接拆分为一个新的<a> 标记吗？

<div class="navbar navbar-inverse">
  <li class="dropdown" id="myTools">
    <a href="/operations/" style="display:inline-block;padding-right:0px;">Operations</a>
    <a class="dropdown-toggle" data-toggle="dropdown" href="#myTools"  style="display:inline-block;padding-left:0px;">
      <b class="caret"></b>
    </a>
    <ul class="dropdown-menu">
      <li><a href="/mypage1/">MyPage 1</a></li>
      <li><a href="/mypage2/">MyPage 2</a></li>
    </ul>
  </li>  
</div>

【讨论】：

这可行，但插入符号转到导航栏中的下一行。 image

【参考方案2】：

你在寻找这样的东西吗？

<div class="btn-group">
    <a href="http://google.com" target="_blank" class="btn btn-link">Action</a>
   <a href="#" class="btn btn-link dropdown-toggle" data-toggle="dropdown">
    <span class="caret"></span>
  </a>
  <ul class="dropdown-menu">
        <li><a href="/mypage1/">MyPage 1</a></li>
        <li><a href="/mypage2/">MyPage 2</a></li>
    </ul>
</div>

http://jsfiddle.net/UtDqm/6/