Bootstrap.css的btn-group-vertical中嵌套btn-group的缺陷

1. 问题描述

　　

在看bootstrap.css的源码时，看到可以在btn-group-vertical中使用btn-group，但是根据实际效果发现bootstrap.css没有认真考虑，或者说是没有写完。

<div class="btn-group-vertical">
  <div class="btn-group">
    <button class="btn btn-warning">button</button>
    <button class="btn btn-warning">button</button>
    <button class="btn btn-warning">button</button>
    <button class="btn btn-warning">button</button>
  </div>
  <div class="btn-group">
    <button class="btn btn-info">button</button>
    <button class="btn btn-info">button</button>
    <button class="btn btn-info">button</button>
    <button class="btn btn-info">button</button>
  </div>
</div>
           

　　

可以看到这仅仅是将inline排列的button变成block一行一个，中间button的圆角都没有去掉，也没有对齐。

bootstrap.css允许在btn-group-vertical中嵌套btn-group，但是并没有预期的效果。

2. 问题分析

　　

　　直接看源码：

　　首先要清楚btn-group下的多个button只有一前一后的button有圆角，中间的都没有。

.btn-group-vertical > .btn,
.btn-group-vertical > .btn-group,
.btn-group-vertical > .btn-group > .btn {
  display: block;
  float: none;
  width: %;
  max-width: %;
}
           

从上面可以看到btn-group-vertical下的按钮，按钮组和组中按钮都打成块一行一个占满，其实这里的设计就有点诡异，为何要将组中按钮也一行一个排列？这好像没什么意义。

.btn-group-vertical > .btn:not(:first-child):not(:last-child) {
  border-radius: ;
}
.btn-group-vertical > .btn:first-child:not(:last-child) {
  border-top-left-radius: px;
  border-top-right-radius: px;
  border-bottom-right-radius: ;
  border-bottom-left-radius: ;
}
.btn-group-vertical > .btn:last-child:not(:first-child) {
  border-top-left-radius: ;
  border-top-right-radius: ;
  border-bottom-right-radius: px;
  border-bottom-left-radius: px;
}
           

这里很好理解，btn-group-vertical下的第一层所有按钮只有一头一尾的有圆角，这也是文档上的演示，一组垂直的按钮，没有任何问题，但是文档没有演示在btn-group-vertical中嵌套btn-group的效果，但是我们之前也从样式中看到是可以在btn-group-vertical下使用btn-group的。

.btn-group-vertical > .btn-group:not(:first-child):not(:last-child) > .btn {
  border-radius: ;
}
.btn-group-vertical > .btn-group:first-child:not(:last-child) > .btn:last-child {
  border-bottom-right-radius: ;
  border-bottom-left-radius: ;
}
.btn-group-vertical > .btn-group:last-child:not(:first-child) > .btn:first-child {
  border-top-left-radius: ;
  border-top-right-radius: ;
}
           

上面也好理解，如果按钮组在最上边，就把此组中最后一个按钮的bottom圆角去掉（因为前面说了组中按钮也是一行一个排列的）；如果按钮组在最下边，就把此组中第一个按钮的top圆角去掉；如果按钮组夹在中间，此组中的所有按钮的圆角全部去掉。然后自己想想还漏掉了多少种其它的情况，如果btn-group-vertical中就一个btn-group怎么办？有两个btn-group怎么办？还有，最外边的按钮的圆角也只有左边或右边一半，都没有解决。

3. 结论

　　bootstrap.css 在垂直按钮组中嵌套普通按钮组的时候让组中按钮一个一行排列的设计是有问题的。

　　不要在btn-group-vertical中嵌套btn-group，bootstrap.css在这上面的代码根本没有写完。btn-group-vertical只写btn，才会有预想的效果。