html - 带有文本下方复选框的自定义复选框

Question

我正在尝试自定义内联复选框，文本在复选框上方对齐。与文本相比，复选框必须水平居中。它应该看起来像这样:

我尝试添加 <br/>标记并将文本移动到控件上，如下所示:

  <label class="custom-control custom-checkbox">
    <span class="custom-control-indicator"></span>
    <span class="custom-control-description">Check this custom checkbox</span>
    <br />
    <input type="checkbox" class="custom-control-input">
  </label>

没有成功......你可以看到failed plunker here .

This plunker是 bootstrap v4 的普通内联复选框

Answer 1

.custom-checkbox {
  display: inline-flex;
  flex-direction: column-reverse;
  align-items: center;
}
.custom-control-indicator {
  position: static; /* override _custom-forms.scss */
}

... 如果我正确理解您的请求，就可以解决问题。但是，文本和复选框是“垂直”对齐的，而不是“水平”。

.custom-checkbox {
  display: inline-flex;
  flex-direction: column-reverse;
  align-items: center;
}
.custom-control-indicator {
  position: static; /* needed to override position:absolute; from 
                     * _custom-forms.scss - bootstrap 
                     */
}

<div>
  <label class="custom-control custom-checkbox">
    <input type="checkbox" class="custom-control-input">
    <span class="custom-control-indicator"></span>
    <span class="custom-control-description">Check 1</span>
  </label>
  <label class="custom-control custom-checkbox">
    <input type="checkbox" class="custom-control-input">
    <span class="custom-control-indicator"></span>
    <span class="custom-control-description">Check 2</span>
  </label>
  <label class="custom-control custom-checkbox">
    <input type="checkbox" class="custom-control-input">
    <span class="custom-control-indicator"></span>
    <span class="custom-control-description">Check 3</span>
  </label>
</div>