Javascript 让twitter引导btn组像带有下拉菜单的分组导航栏一样运行
我一直在尝试使用下拉菜单让Twitter引导Javascript 让twitter引导btn组像带有下拉菜单的分组导航栏一样运行,javascript,css,twitter-bootstrap,Javascript,Css,Twitter Bootstrap,我一直在尝试使用下拉菜单让Twitter引导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="#" cla
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>
还有我的尝试:
这将显示一个按钮组。我希望该组中的一些按钮具有下拉菜单
我正在努力实现的一个例子是:
注:当一个按钮与另一个按钮相邻时,分组按钮“栏”不应具有圆形角。(右侧)。按钮组说明:
带有下拉菜单的按钮必须单独包装在自己的文件夹中
.btn工具栏中的.btn组,用于正确渲染
显然,如果您这样做,那么每个按钮都会单独放置,即失去工具栏效果。因此,在同一个工具栏中似乎不能有多个下拉菜单-我想这是Bootstrap实现下拉菜单的一个限制
一个工具栏中可以有多个下拉列表,因此您可以使用它。我创建了一个类btn-toolbar2,以避免冲突和超越btn工具栏默认行为 下拉列表必须位于其自己的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>
只需使用:
<div class="btn-group">
<button class="btn" onclick="window.location.href='http://whatever.location';">
...
...
</div>
...
...
添加此CSS以修复它:
.btn-group > .btn-group {
float: left;
}
.btn-group > .btn-group > .dropdown-toggle {
.border-radius(0);
}
.btn-group > .btn-group > .dropdown-toggle:first-child {
-webkit-border-top-left-radius: 4px;
-moz-border-radius-topleft: 4px;
border-top-left-radius: 4px;
-webkit-border-bottom-left-radius: 4px;
-moz-border-radius-bottomleft: 4px;
border-bottom-left-radius: 4px;
}
.btn-group > .btn-group > .dropdown-toggle:last-child {
-webkit-border-top-right-radius: 4px;
-moz-border-radius-topright: 4px;
border-top-right-radius: 4px;
-webkit-border-bottom-right-radius: 4px;
-moz-border-radius-bottomright: 4px;
border-bottom-right-radius: 4px;
}
看起来怎么样
注意,两个按钮都会切换下拉列表?@JeremyChild这是因为。下拉列表切换必须启用is own.btn group。我已经用更新的代码编辑了我的答案。谢谢!我使用了导航栏和一些广泛的css调整,使它看起来像一个按钮组。谢谢你的帮助!
.btn-group > .btn-group {
float: left;
}
.btn-group > .btn-group > .dropdown-toggle {
.border-radius(0);
}
.btn-group > .btn-group > .dropdown-toggle:first-child {
-webkit-border-top-left-radius: 4px;
-moz-border-radius-topleft: 4px;
border-top-left-radius: 4px;
-webkit-border-bottom-left-radius: 4px;
-moz-border-radius-bottomleft: 4px;
border-bottom-left-radius: 4px;
}
.btn-group > .btn-group > .dropdown-toggle:last-child {
-webkit-border-top-right-radius: 4px;
-moz-border-radius-topright: 4px;
border-top-right-radius: 4px;
-webkit-border-bottom-right-radius: 4px;
-moz-border-radius-bottomright: 4px;
border-bottom-right-radius: 4px;
}