Twitter Bootstrap 中的多个按钮显示相同的下拉菜单 - 为什么？

Question

我正在尝试用 Bootstrap 组合一个小的下拉菜单。我在 JSFiddle here 上放了一个示例。

我们的想法是让每个按钮触发一个不同的下拉列表，这样点击文件会给你一个包含新建和关闭的下拉列表，点击编辑给你一个包含复制、粘贴和撤消等的下拉列表。

但是，我得到所有按钮的相同下拉菜单。我肯定做错了什么。

我还查看了由this StackOverflow question 链接的this JSFiddle，但它似乎不起作用 - 单击时根本没有显示下拉菜单。

有什么建议吗？

这是 HTML 的副本：

<div id="mainMenubar" class="btn-group">
    <button class="btn" href="#" onclick="alert('Hello!');">Menu</button>
    <button href="#" class="btn dropdown-toggle" role="button" data-toggle="dropdown">File</button>
    <ul id="fileMenuSelector" class="dropdown-menu">
        <li><a href="#">New</a></li>
        <li><a href="#">Close</a></li>
    </ul>
    <button href="#" class="btn dropdown-toggle" data-toggle="dropdown">Edit</button>
    <ul id="editMenuSelector" class="dropdown-menu">
        <li><a href="#">Copy</a></li>
        <li><a href="#">Paste</a></li>
        <li><a href="#">Undo</a></li>                   
    </ul>
    <button href="#" class="btn dropdown-toggle" data-toggle="dropdown">Debug</button>
    <ul id="debugMenuSelector" class="dropdown-menu">
        <li><a href="#">Some Debug</a></li>
        <li><a href="#">Show XML</a></li>
        <li><a href="#">Show Log</a></li>
        <li><a href="#">Shut down the lot</a></li>
    </ul>
</div>

Answer 1

这应该做你想做的：

<div id="mainMenubar">
  <button class="btn" href="#" onclick="alert('Hello!');">Menu</button>
  <div class="btn-group">
    <button href="#" class="btn dropdown-toggle" role="button" data-toggle="dropdown">File</button>
    <ul id="fileMenuSelector" class="dropdown-menu">
        <li><a href="#">New</a></li>
        <li><a href="#">Close</a></li>
    </ul>
  </div>
  <div class="btn-group">
    <button href="#" class="btn dropdown-toggle" data-toggle="dropdown">Edit</button>
    <ul id="editMenuSelector" class="dropdown-menu">
        <li><a href="#">Copy</a></li>
        <li><a href="#">Paste</a></li>
        <li><a href="#">Undo</a></li>
    </ul>
  </div>
  <div class="btn-group">
    <button href="#" class="btn dropdown-toggle" data-toggle="dropdown">Debug</button>
    <ul id="debugMenuSelector" class="dropdown-menu">
        <li><a href="#">Some Debug</a></li>
        <li><a href="#">Show XML</a></li>
        <li><a href="#">Show Log</a></li>
        <li><a href="#">Shut down the lot</a></li>
    </ul>
  </div>
</div>

编辑为导航栏添加样式，如下所述：

.navbar {
  display: table;
}

.navbar .nav > li > a {
  padding: 5px;
}

.navbar-inner {
  min-height: 0
}

Answer 2

我认为您需要在按钮内使用链接（锚点）来触发下拉菜单...

       <button class="btn btn-group">
            <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
                File 
                <span class="caret"></span>
            </a>
            <ul class="dropdown-menu">
                <li><a href="#">New</a></li>
                <li><a href="#">Close</a></li>
            </ul>
        </button>

Here's a working demo

编辑：这是 .btn-toolbar 内的 alternate 版本，因此每个下拉菜单都在其自己的 btn-group 内。这适用于 FireFox：http://bootply.com/61019

Answer 3

我知道这已经快 4 岁了，但我偶然发现了同样的问题。 ZimSystem 有正确的答案，但你提到当你复制和粘贴他的代码时仍然有一些空格。那是因为他的代码没有包含在正确的 css 样式中。

当下拉菜单和按钮样式放在同一个组时看起来并不凌乱，这很好，但令人讨厌的是下拉菜单无法正常工作。

无论如何这里是一个工作代码示例，没有使用修改和 bootstrap.css

<div class="input-group">
  <input type="text" class="form-control" aria-label="...">
  <div class="input-group-btn">
    <div class="btn-group">
      <button type="button" class="btn btn-default" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Action <span class="caret"></span></button>
      <ul class="dropdown-menu dropdown-menu-right">
        <li><a href="#">Action</a></li>
        <li><a href="#">Another action</a></li>
        <li><a href="#">Something else here</a></li>
        <li role="separator" class="divider"></li>
        <li><a href="#">Separated link</a></li>
      </ul>
    </div>
    <div class="btn-group">
      <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Action <span class="caret"></span></button>
      <ul class="dropdown-menu dropdown-menu-right">
        <li><a href="#">Action</a></li>
        <li><a href="#">Another action</a></li>
        <li><a href="#">Something else here</a></li>
        <li role="separator" class="divider"></li>
        <li><a href="#">Separated link</a></li>
      </ul>
    </div>
  </div>
</div>

dropdown-toggle 类放在最后一个按钮上，因为它会在最后放置一个边框半径，使其看起来整洁和完整。

我希望这对其他人有帮助。