我一直在尝试让带有下拉菜单的 Twitter Bootstrap btn-group
为具有下拉菜单的多个按钮工作。
例子:
<div class="btn-group">
<a href="#" class="btn">1</a>
<a href="#" class="btn">2</a>
<a href="#" class="btn">3</a>
<a href="#" class="btn">4</a>
<a href="#" class="btn">5</a>
</div>
还有我的尝试:http://jsfiddle.net/x2BGB/
这会显示一个按钮组。我希望该组中的某些按钮具有下拉菜单。
我想要实现的一个例子是:
注意:当一个按钮与另一个按钮相邻时,分组按钮“栏”不应该有圆 Angular 。 (右侧)。
最佳答案
我创建了一个 btn-toolbar2 类来避免冲突并覆盖 btn-toolbar 默认行为。
下拉菜单必须在它们自己的 btn 组中。
<div class="btn-toolbar btn-toolbar2">
<div class="btn-group">
<button class="btn">Dashboard</button>
</div>
<div class="btn-group">
<button class="btn">Button 1</button>
<button class="btn dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li><li><a href="#">Separated link</a></li>
</ul>
</div>
<div class="btn-group">
<button class="btn">Item 3</button>
<button class="btn dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
</div>
使用CSS
@import url('http://twitter.github.com/bootstrap/assets/css/bootstrap.css');
.btn-toolbar2 >.btn-group + .btn-group {
margin-left: -5px;
}
.btn-toolbar2 > .btn-group > .btn, .btn-toolbar2 > .btn-group > .dropdown-toggle
{
-webkit-border-radius: 0px;
border-radius: 0px;
-moz-border-radius: 0px;
}
.btn-toolbar2 > .btn-group:first-child > .btn, .btn-toolbar2 > .btn-group:first-child > .dropdown-toggle{
-webkit-border-bottom-left-radius: 4px;
border-bottom-left-radius: 4px;
-webkit-border-top-left-radius: 4px;
border-top-left-radius: 4px;
-moz-border-radius-bottomleft: 4px;
-moz-border-radius-topleft: 4px;
}
.btn-toolbar2 > .btn-group:last-child > .btn:last-child, .btn-toolbar2 > .btn-group:last-child > .dropdown-toggle:nth-last-child(2){
-webkit-border-bottom-right-radius: 4px;
border-bottom-right-radius: 4px;
-webkit-border-top-right-radius: 4px;
border-top-right-radius: 4px;
-moz-border-radius-bottomright: 4px;
-moz-border-radius-topright: 4px;
}
关于javascript - 让 twitter bootstrap btn-group 像带下拉菜单的分组导航栏一样操作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11068657/