Bootstrap 4 Beta 3中单选框与复选框的垂直对齐问题

嘿，我完全懂你遇到的这个小麻烦——Bootstrap的自定义单选/复选框确实是靠.custom-control-label::before和::after这俩伪元素来渲染控件的，默认布局是控件在前、文本在后，要改成文本在上、控件居中确实得调整下CSS逻辑。

咱们可以通过重写自定义控件的布局规则，重新定位伪元素来实现需求，具体方案如下：

1. 调整自定义控件的垂直布局
   默认.custom-control是横向弹性布局，咱们把它改成纵向排列，同时让内容整体居中：

.custom-control.custom-checkbox,
.custom-control.custom-radio {
  flex-direction: column;
  align-items: center; /* 让控件和文本整体居中 */
  text-align: center; /* 文本本身居中显示 */
}

2. 重置伪元素的定位规则
   默认伪元素是绝对定位在label左侧，现在取消绝对定位，让它跟着文本下方排列，再加点儿间距：

.custom-control-label::before,
.custom-control-label::after {
  position: static; /* 脱离绝对定位，跟随文档流 */
  margin-top: 0.25rem; /* 文本和控件之间留些空隙 */
}

3. 移除label的左侧内边距（可选）
   默认label的左侧内边距是给伪元素留位置的，现在伪元素不在左边了，把这个内边距去掉：

.custom-control-label {
  padding-left: 0;
}

把这段CSS加到你的样式文件里，就能实现文本在单选/复选框上方，且整个控件组居中显示的效果啦，直接在你的测试代码里引入就能看到变化。

内容的提问来源于stack exchange，提问作者Nate