twitter-bootstrap - 使用 Twitter Bootstrap 2.x 连续多个分组的下拉按钮

Question

是否有一种简单的方法可以使用 Twitter Bootstrap将按钮下拉列表分组为按钮组？

这段代码

<div class="btn-toolbar">
<div class="btn-group">
    <div class="btn-group">
        <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
            January
            <span class="caret"></span>
        </a>
        <ul class="dropdown-menu">
            <li><a href="#" class="active">January</a></li>
            <li><a href="#">February</a></li>
            <!-- ... -->
        </ul>
    </div>
    <div class="btn-group">
        <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
            2012
            <span class="caret"></span>
        </a>
        <ul class="dropdown-menu">
            <li><a href="#" rel="2012" class="active">2012</a></li>
            <li><a href="#" rel="2011">2011</a></li>
            <li><a href="#" rel="2010">2010</a></li>
            <li><a href="#" rel="2009">2009</a></li>
        </ul>
    </div>
</div>

结果

Answer 1

解决方案是将下拉按钮放入分组按钮中。

这是一个例子：http: //jsfiddle.net/RayZ/CgBTn/49/

    <div class="btn-group"> <!-- group container for buttons merging -->
        <div class="btn btn-group">  <!-- button and dropdown group in one -->
            <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
                One 
                <span class="caret"></span>
            </a>
            <ul class="dropdown-menu">
                <li><a href="#">foo</a></li>
            </ul>
        </div>
        <div class="btn btn-group">
            <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
                Two
                <span class="caret"></span>
            </a>
            <ul class="dropdown-menu">
                <li><a href="#">foo</a></li>
            </ul>
        </div>
    </div>

一些 CSS 调整：

.btn-group.btn {   border: 0;   padding: 0; }
.btn-group.btn > .btn { border-radius: 0 }
.btn-group.btn > .dropdown-menu {  text-align: left; }
.btn-group.btn:first-child > .btn {
  -webkit-border-radius: 4px 0 0 4px;
     -moz-border-radius: 4px 0 0 4px;
          border-radius: 4px 0 0 4px;
}

.btn-group.btn:last-child > .btn {
  -webkit-border-radius: 0 4px 4px 0;
     -moz-border-radius: 0 4px 4px 0;
          border-radius: 0 4px 4px 0;
}

​</p>