按钮组和子菜单 - Twitter Bootstrap

Question

我想知道如何构建一个带有子菜单的按钮组。

<div class="btn-group">
  <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
    Action
    <span class="caret"></span>
  </a>
  <ul class="dropdown-menu">
    <!-- dropdown menu links -->
  </ul>
</div>

我希望您能将这个放在btn-group中：

<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
  ...
  <li class="dropdown-submenu">
    <a tabindex="-1" href="#">More options</a>
    <ul class="dropdown-menu">
      ...
    </ul>
  </li>
</ul>

这是我想要的内容：（但需要使用twitter-bootstrap）

- Severiano

---

从 Bootstrap 文档中： "按钮组中的下拉菜单-注意！带下拉菜单的按钮必须在其自己的 .btn-toolbar 中单独包装在一个 .btn-group 内以进行适当的渲染。" http://twitter.github.com/bootstrap/components.html#buttonGroups - Billy Moat

想象一下文件夹是按钮，并且拥有菜单，我希望它有一个子菜单。 按钮 -> 菜单（项目）-> 子菜单（+项目） - Severiano

Answer 1

解释：此按钮实际上可以放在任何地方，我只是把它放在按钮组中以展示该按钮没有什么特别之处。

首先，您需要在按钮上添加data-toggle = dropdown。然后，您需要将标准下拉菜单添加到按钮中。我想关键在于知道您可以在子菜单中添加第二个下拉菜单而不受任何限制。

所以，您可以随意在任何 < li > 中添加子菜单，并在其中再添加一个下拉菜单。因此，我们基本上有一个按钮 -> 下拉菜单 -> 子菜单 -> 下拉菜单 -> 子元素的结构。这可能有点困惑，但我认为非常直观易懂。

<div class="btn-toolbar">
<div class="btn-group">

    <div class="btn-group">
      <!--start of dropdown button -->
      <button class="btn dropdown-toggle" data-toggle="dropdown">Dropdown Button <span class="caret"></span></button>
      <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
         <li class="dropdown-submenu">
           <a tabindex="-1" href="#">More options</a>
           <ul class="dropdown-menu">
                <li><a tabindex="-1" href="#">Regular link</a></li>
                <li><a tabindex="-1" href="#">Regular link</a></li>
                <li><a tabindex="-1" href="#">Regular link</a></li>
           </ul>
         </li>
     </ul>
    </div>
    <!--end of dropdown button -->
    <button class="btn">Middle</button>
    <button class="btn">Right</button>
</div>
</div>

编辑：

玩弄了一下，我意识到确实需要

<div class="btn-group"> 

即使只是独立的按钮，也要包装它。我创建了这个更新的fiddle以演示它。
http://jsfiddle.net/jamiematthews/yWrRA/1/

- Jameo

---

这里没有解释。当然，你的解决方案可能有效，但如果没有解释，这个答案对除了楼主以外的其他人没有帮助。 - Bojangles

抱歉 @bojangles，我添加了一些解释。这很简单，但我认为我的解释应该会进一步帮助。如果仍有疑惑，请告诉我。 - Jameo

不错。快速阅读HTML代码就可以看出你做了什么，但我认为明确解释一下改变了什么将有助于所有未来的访问者，无论他们对HTML和/或Bootstrap有多熟练。 - Bojangles

当然，我也注释了实际按钮的起始和结束位置，因为这很可能是人们感兴趣的！ - Jameo

Answer 2

需要一些尝试，但是这是实现它的方法：

http://jsfiddle.net/ewQTE/2/

<div class="btn-toolbar">
<div class="btn-group">

    <div class="btn-group">
      <button class="btn dropdown-toggle" data-toggle="dropdown">Left <span class="caret"></span></button>
      <ul class="dropdown-menu">
          <li><a href="#">Dropwn Link #1</a></li>
          <li><a href="#">Dropwn Link #2</a></li>
      </ul>
    </div>

    <button class="btn">Middle</button>
    <button class="btn">Right</button>
</div>
</div>

- Billy Moat

---

我上面所做的就是您在最初的问题中（在您发布了那个小图像之前）所要求的。非常非常抱歉，这不是您想要的。罢了。 - Billy Moat

抱歉，没有更明确地表达。 - Severiano

非常感谢那位对这段完全可接受的代码进行了负评的人，这段代码是对原帖的有效解释。祝你晚安。 - Billy Moat