btn-group with submenu twitterbootstrap

Question

我想知道如何使用子菜单构建一个btn-group。

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

这就是我想要的:(但是有twiiter-bootstrap）

Answer 1

说明：基本上这个btn可以去任何地方，我只是把它放在一个按钮组中，以显示这个按钮没什么特别之处。

首先，您要在按钮中添加data-toggle = dropdown。然后，您需要将标准下拉菜单添加到按钮。我想这里的关键是知道没有什么能阻止你在子菜单中添加第二个下拉菜单。

所以请在任何＆lt;上添加子菜单。 li>你想要的，在里面，只是另一个下拉菜单。基本上我们有Button - ＆gt;下拉菜单 - ＆gt;下拉子菜单 - ＆gt;下拉菜单 - ＆gt;子元素。我觉得很容易让人感到困惑但很直接。

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

包裹按钮，即使它只是独立。我创建了这个更新的小提琴来演示它 http://jsfiddle.net/jamiematthews/yWrRA/1/

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>