Twitter Bootstrap 分裂下拉菜单

Question

我有一个导航栏，其中下拉菜单旁边带有一个小三角形。

在当前代码中，如果用户点击“Operations”文本或小三角形，则会打开下拉菜单。但我需要做到以下两点：

1. 如果用户单击“Operations”链接，我希望用户进入到我的“/operations/”页面。 2. 如果用户单击小三角形，则下拉菜单将可见。如果用户单击下拉菜单中的任意元素，则将被重定向到相关页面。

示例： 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 Bootstrap文档中，有关于如何创建分裂按钮下拉菜单的说明，可以在这里找到。但我不想使用按钮。是否可能只使用链接而不使用按钮来实现分裂行为？

- trante

---

为什么不直接将插入符号包裹在 dropdown-toggle 中，并在操作文本中添加普通的 href？请参见此处。 - user1211577

@JoshuaM 和 Stevie 的回答一样。这个方法可行，但插入符号会跳到导航栏的下一行。图片链接 - trante

你的a样式设置为display: block了吗？那是我能想到的唯一原因，因为它对我来说运行良好。 - user1211577

没有，我没有设置为 display:block。哪个锚点？ - trante

我的意思是，在你的样式表中是否有像 a { display: block } 这样定义的样式？这可能会将插入符号推到下一行，因为两个 <a> 标签将文本和插入符号强制换行。我能在哪里查看你的工作代码？ - user1211577

我更新了我的回答，<a> 标签的 Bootstrap 样式是 display:block，就像 Joshua 提到的那样。如果你将它们覆盖为 display:inline-block;，它就可以工作了。 - Steve Valliere

Answer 1

您是否可以将“Operations”链接拆分为一个新的 <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>

- Steve Valliere

---

这个可以运行，但插入符号会跳到导航栏的下一行。图片 - trante

Answer 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/

- Jako