有一个简单的方法让按钮
dropdowns分组像
button-groups与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>
结果
解决方法
解决方案是将下拉按钮放入分组按钮.
这是一个例子:
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; }
原文地址:https://www.jb51.cc/bootstrap/233873.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。