我一直试图让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/ 原文地址:https://www.jb51.cc/css/427315.html 版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。 上一篇:css – 使背景与文本宽度相同,但高下一篇:将鼠标悬停在其父LI上时如何触发链
还有我的尝试:http://jsfiddle.net/x2BGB/
这会显示一个按钮组.我希望该组中的一些按钮具有下拉菜单.
我想要实现的一个例子是:
注意:当按钮位于另一个按钮旁边时,分组按钮“bar”不应具有圆角. (右边).
下拉列表必须在他们自己的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/ 原文地址:https://www.jb51.cc/css/427315.html 版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。
与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/
原文地址:https://www.jb51.cc/css/427315.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。