Question

我正在尝试将一个带有Bootstrap的小下拉菜单放在一起。我在JSFiddle here上提出了一个示例。

这个想法是让每个按钮触发一个不同的下拉列表，这样单击File会给你一个包含New和Close的下拉列表，点击Edit会给你一个包含Copy，Paste和Undo等的下拉列表。

但是，我得到所有按钮的相同下拉列表。我当然肯定做错了什么。

我还看了this JSFiddle，链接到this StackOverflow question，但它似乎没有用 - 点击时根本没有显示下拉列表。

有什么建议吗？

以下是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工具栏中的替代版本，以便每个下拉列表都在其自己的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>

下拉切换类放在最后一个按钮上，因为它会在最后放置一个边框半径，使其看起来整洁并完成。

我希望这会帮助别人。

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

3 个答案:

Here's a working demo