自定义复选框，文本下方有复选框

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>

Answer 2

试试这段代码......

<label for='chkCart'>Add to Cart</label><br>
<input type='checkbox' id='chkCart'/>

在你的jquery脚本中

......

$(function () {
    $("#chkCart").click(function () {
        var lbl = $("label[for='"+$(this).attr('id')+"']");
        lbl.text($(this).is(":checked")?"Added":"Add to Cart");
    });
});