连同Twitter Bootstrap 2.x的多个分组下拉按钮 [英] Multiple grouped dropdown buttons in a row with Twitter Bootstrap 2.x

问题描述

它有一个简单的方法来获取按钮

 < div class =btn-group> <！ - 用于按钮合并的组容器 - > 
< div class =btn btn-group> <！ - 按钮和下拉组在一个 - > 
< a class =btn dropdown-toggledata-toggle =dropdownhref =＃> 
 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-toggledata-toggle =dropdownhref =＃> 
 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;填充：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; 
} 
  

It there an easy way to get button dropdowns grouped like button-groups with Twitter Bootstrap?

This code

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

Result

解决方案

Solution is place dropdown button into grouped button.

Here is an example: 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>

Some CSS tweaks:

.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;
}

​

这篇关于连同Twitter Bootstrap 2.x的多个分组下拉按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！