Bootstrap.css的btn-group-vertical中嵌套btn-group的缺陷
来源:互联网 发布:淘宝没收到货自动确认 编辑:程序博客网 时间:2024/06/14 03:37
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: 100%; max-width: 100%;}
从上面可以看到btn-group-vertical下的按钮,按钮组和组中按钮都打成块一行一个占满,其实这里的设计就有点诡异,为何要将组中按钮也一行一个排列?这好像没什么意义。
.btn-group-vertical > .btn:not(:first-child):not(:last-child) { border-radius: 0;}.btn-group-vertical > .btn:first-child:not(:last-child) { border-top-left-radius: 4px; 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-right-radius: 4px; border-bottom-left-radius: 4px;}
这里很好理解,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: 0;}.btn-group-vertical > .btn-group:first-child:not(:last-child) > .btn:last-child { border-bottom-right-radius: 0; border-bottom-left-radius: 0;}.btn-group-vertical > .btn-group:last-child:not(:first-child) > .btn:first-child { border-top-left-radius: 0; border-top-right-radius: 0;}
上面也好理解,如果按钮组在最上边,就把此组中最后一个按钮的bottom圆角去掉(因为前面说了组中按钮也是一行一个排列的);如果按钮组在最下边,就把此组中第一个按钮的top圆角去掉;如果按钮组夹在中间,此组中的所有按钮的圆角全部去掉。然后自己想想还漏掉了多少种其它的情况,如果btn-group-vertical中就一个btn-group怎么办?有两个btn-group怎么办?还有,最外边的按钮的圆角也只有左边或右边一半,都没有解决。
3. 结论
bootstrap.css 在垂直按钮组中嵌套普通按钮组的时候让组中按钮一个一行排列的设计是有问题的。
不要在btn-group-vertical中嵌套btn-group,bootstrap.css在这上面的代码根本没有写完。btn-group-vertical只写btn,才会有预想的效果。
- Bootstrap.css的btn-group-vertical中嵌套btn-group的缺陷
- BootStrap--CSS组件--按钮组(btn-group)
- bootstrap btn-group-justified 不起作用
- 定制bootstrap的按钮btn-primary
- btn的拖动
- HTML/CSS(一)Bootstrap btn
- bootstrap的btn超过了限制页面媒体选择
- btn变大变小的效果
- btn的enabled和userInteractionEnabled
- bootstrap btn 按钮颜色
- bootstrap去btn圆角
- 修改BTN的背景颜色的图片
- EXT修改Btn的disabled属性
- VC:逃跑btn 的实现方法
- 79 带(tip)冒泡的btn
- 去掉btn外面的焦点蓝框
- 点击一个Btn其他的btn的颜色变成原来的样子
- Flex中的CSS: (3)CSS会被编译器转换为什么样的AS代码--交集:s|Button#btn
- 10 个功能独特的开源人工智能项目
- SQL UNION(操作符)
- spring 切面编程
- BAT机器学习面试题及解析(286-290题)
- 文件上传与下载
- Bootstrap.css的btn-group-vertical中嵌套btn-group的缺陷
- 程序员修炼之道(通俗版)——第三章
- 设计模式-装饰模式
- SQL SELECT INTO
- webpack 最简单的入门教程(基础的文件打包以及实现热加载)
- 【Tensorflow】tf.tile函数 解决矩阵相互N对M进行合并问题
- QT linux安装
- SQL CREATE DATABASE
- 学习笔记第五篇之聚类算法