小知识点：复选框和单选按钮水平排列

最新推荐文章于 2024-01-03 15:39:26 发布

转载最新推荐文章于 2024-01-03 15:39:26 发布 · 3.8k 阅读

本文详细解析了Bootstrap CSS文件中关于radio-inline和checkbox-inline组件的实现源码，包括它们的显示方式、布局调整及交互特性，提供深入理解Bootstrap组件内部构造的指南。

运行效果如下或查看右侧结果窗口：

实现源码请查看bootstrap.css文件第1767行～第1780行：

.radio-inline,
.checkbox-inline {
display: inline-block;
padding-left: 20px;
margin-bottom: 0;
font-weight: normal;
vertical-align: middle;
cursor: pointer;
}
.radio-inline + .radio-inline,
.checkbox-inline + .checkbox-inline {
margin-top: 0;
margin-left: 10px;
}