twitter-bootstrap 使用 Twitter Bootstrap 2.x 连续多个分组下拉按钮
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13763176/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Multiple grouped dropdown buttons in a row with Twitter Bootstrap 2.x
提问by Andrew Rumm
It there an easy way to get button dropdownsgrouped like button-groupswith Twitter Bootstrap?
是否有一种简单的方法可以使用 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
结果
回答by Andrew Rumm
Solution is place dropdown button into grouped button.
解决方案是将下拉按钮放入分组按钮中。
Here is an example: http://jsfiddle.net/RayZ/CgBTn/49/
这是一个例子：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:
一些 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;
}
?
?
