Question

桌面应用上的菜单通常会在左侧显示操作名称，右侧显示键盘快捷键like this。

我想在Bootstrap下拉列表中执行相同的操作。但是，我似乎无法让它发挥作用。我尝试过几件事。以下是两个最接近的尝试和a link to a demo的代码。

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

再次，here's a link to a demo。

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

使用Try 1，问题是the label and the shortcut overlap。

使用Try 2，问题是the shortcut gets pushed to another line，并且将鼠标悬停在项目上也存在一些奇怪。

我想要的是所有人都在一条线上，所以你会看到this之类的东西（这个图像只是我在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;
}

<强> Updated 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;">

的范围内

它能否更好地满足您的需求？

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

2 个答案: