javascript – 获取Twitter bootstrap btn-group,以便像带有下拉菜单的分组导航栏一样运行

我一直试图让Twitter Bootstrap btn-group与下拉列表一起工作,以便为具有下拉菜单的多个按钮工作.

例：

还有我的尝试：http://jsfiddle.net/x2BGB/

这会显示一个按钮组.我希望该组中的一些按钮具有下拉菜单.

我想要实现的一个例子是：

注意：当按钮位于另一个按钮旁边时,分组按钮“bar”不应具有圆角. (右边).

最佳答案

我创建了一个类btn-toolbar2以避免冲突和over btn-toolbar默认行为.

下拉列表必须在他们自己的btn组中.

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

http://jsfiddle.net/baptme/x2BGB/4/