Bootstrap 下拉菜单之垂直分组.pdfVIP

Bootstrap 下拉菜单之垂直分组 垂直排列 让⼀组按钮垂直堆叠排列显⽰⽽不是⽔平排列。分列式按钮下拉菜单不⽀持这种⽅ 式。 垂直的按钮组 使 class .btn-group-vertical 可以轻松实现⼀组按钮垂直堆叠排列。 下⾯的实例演⽰了上⾯ Bootstrap 按钮组语法 中讨论到的 class .btn-group-vertical 的使 ： 代码如下： div class=btn-group-vertical button class=btn btn-default type=buttonBootstrap 按钮垂直排 ... /div ⽰例2 ： div class=btn-group-vertical button class=btnbtn-default type=button⾸⻚/button button class=btnbtn-default type=button产品展示/button button class=btnbtn-default type=button案例分析/button button class=btnbtn-default type=button联系我们/button div class=btn-group button class=btnbtn-default dropdown-toggle data-toggle=dro ul class=dropdown-menu lia href=##公司简介/a/li lia href=##企业⽂化/a/li lia href=## 织结构/a/li lia href=##客服服务/a/li /ul /div /div 运⾏的效果如下： 实现垂直分组的样式代码： /*请查看bootstrap .css⽂件第3234⾏～第3276⾏*/ .btn-group-vertical .btn .btn-group-vertical .btn-group .btn-group-vertical .btn-group .btn { display : block; float: none; width: 100% ; max-width: 100% ; } .btn-group-vertical .btn-group .btn { float: none; } .btn-group-vertical .btn + .btn .btn-group-vertical .btn + .btn-group .btn-group-vertical .btn-group + .btn .btn-group-vertical .btn-group + .btn-group { margin-top: -1px; margin-left: 0; } .btn-group-vertical .btn:not(:first-child):not(:last-chil d) { border-radius: 0; } .btn-group-vertical .btn:first-child:not(:last-child) { border-top-right-radius: 4px; border-bottom-right-radius: 0; border-bottom-left-radius: 0; } .btn-group-vertical .btn:last-child:not(:first-child) { border-top-left-radius: 0; border-top-right-radius: 0; border-bottom-left-radius: 4px; } .btn-group-vertical .btn-group:not(:first-child):not(:las t-child) .btn { border-radius: 0; } .btn-group-vertical .btn-group:first-child:not(:last-chil d) .btn:last-child .btn-group-ve