无法在Bootstrap中获取“pull-right”图标字形

Question

我想在下拉菜单中像下面这样向右拉动图标字形

<div class="navbar">
  <div class="navbar-inner">
    <ul class="nav">
      <li class="dropdown">
        <a data-toggle="dropdown" class="dropdown-toggle" href="#">Dropdown <b class="caret"></b></a>
        <ul class="dropdown-menu">
          <li>
            <a href="#">2-level Dropdown <i class="icon-arrow-right pull-right"></i></a>
            <ul class="dropdown-menu sub-menu">
              <li><a href="#">Action</a></li>
              <li><a href="#">Another action</a></li>
              <li><a href="#">Something else here</a></li>
            </ul>
          </li>
          <li><a href="#">Another action</a></li>
          <li class="divider"></li>
          <li><a href="#">One more separated link</a></li>
        </ul>
      </li>
    </ul>
  </div>
</div>

但是当我在 Firefox 上运行这段代码时（Chrome 和 IE 正常），"icon-arrow-right" 和 "2级下拉菜单" 不在同一行。我该如何修复它？

JSFIDDLE 上的完整代码

- Toan Nguyen

---

这是一个已知的错误。这里有一个使用inline-block的解决方案链接，但我无法在您的JSFiddle中使其工作。 - Bojangles

为什么不使用内置的.dropdown-submenu类呢？根据Bootstrap文档：“通过一些简单的标记添加，可以在悬停时添加额外级别的下拉菜单，就像OS X的下拉菜单一样。将.dropdown-submenu添加到现有下拉菜单中的任何li元素中，即可自动应用样式。” - Schmalzy

Answer 1

<a href="#" style="overflow: hidden;">
    <span class="pull-left">2-level Dropdown</span>
    <span class="icon-arrow-right pull-right"></span>
</a>

jsfiddle

- cetver

---

仍然发生错误。你的代码只能在Chrome上运行（FireFox和IE都失败了）。 - Toan Nguyen

这可能需要在浮动后面添加 .clearfix 元素，以使悬停背景再次正常工作。 - isherwood

Answer 2

来自 cetver 的解决方案对我很有用。

然而，为了记录下来，这里还有另一种获得相同结果的方法：
http://www.bootply.com/70536

HTML

<a href="#"><i class="icon-arrow-right"></i> 2-level Dropdown</a>  

CSS

.icon-arrow-right {
float: right;
margin-top: 2px;
margin-right: -6px;
}

- David Taiaroa