Bootstrap下拉列表中同一行上的左右对齐文本

Question

桌面应用程序上的菜单通常在左侧显示操作名称，在右侧显示键盘快捷键，如下所示。

我想在Bootstrap下拉列表中做同样的事情。然而，我似乎无法让它发挥作用。我试过几种方法。这是两次最接近的尝试的代码和一个演示链接。

<ul class="nav navbar-nav">
  <li class="dropdown">
    <a id="drop1" href="#" class="dropdown-toggle" data-toggle="dropdown">Try 1 <b class="caret"></b></a>
    <ul class="dropdown-menu">
      <li><a href="#"><span class="text-muted pull-right">Alt+P</span>Label</a></li>
      <li><a href="#"><span class="text-muted pull-right">Alt+P</span>Long long long long long label</a></li>
    </ul>
  </li>
  <li class="dropdown">
    <a id="drop1" href="#" class="dropdown-toggle" data-toggle="dropdown">Try 2 <b class="caret"></b></a>
    <ul class="dropdown-menu">
      <li><a href="#"><span class="pull-left">Label</span><span class="text-muted pull-right">Alt+P</span></a></li>
      <li><a href="#"><span class="pull-left">Long long long long long label</span><span class="text-muted pull-right">Alt+P</span></a></li>
    </ul>
  </li>
</ul>

同样，这里有一个演示链接。

Try 1和Try 2都适用于短标签，但不适用于长标签。

使用Try 1，问题是标签和快捷方式重叠。

使用Try 2，问题是快捷方式会被推到另一行，而且悬停在项目上也有一些奇怪之处。

我想要的是把它都放在一行上，这样你就会看到这样的东西（那个图像只是我在GIMP中制作的一个赝品）。

Answer 1

我用Bootstrap类尝试了很多方法来获得结果，但我认为您需要一些自定义CSS。这里有一个例子：

  <ul class="nav navbar-nav">
    <li class="dropdown">
      <a id="drop1" href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown menu <b class="caret"></b></a>
      <ul class="dropdown-menu">
        <li><a href="#">Label <span class="kbd text-muted">Alt+S</span></a></li>
        <li><a href="#">Not labeled</a></li>
        <li><a href="#">Long long long long long label <span class="kbd text-muted">Alt+L</span></a></li>
      </ul>
    </li>
  </ul>

.dropdown-menu > li > a {
    position: relative;
    padding-right: 70px;
}
.dropdown-menu > li > a > span.kbd {
    position: absolute;
    right: 20px;
    top: 3px;
}

更新的Bootply

Answer 2

你能看看吗http://bootply.com/99291

看看这个代码：

  <a id="drop1" href="#" class="dropdown-toggle" data-toggle="dropdown">Try 1 <b class="caret"></b></a>
  <ul class="dropdown-menu">
    <li><a href="#"><span class="text-muted pull-right">Alt+P</span>Label</a></li>
    <li><a href="#"><span class="text-muted pull-right">Alt+P</span><span style="white-space: normal;">Long long long long long label</span></a></li>
  </ul>

您的超长文本用<span style="white-space: normal;"> 包装在一个跨度中

它渲染得更好吗？