我正在尝试自定义内联复选框,文本在复选框上方对齐。与文本相比,复选框必须水平居中。它应该看起来像这样:
我尝试添加 <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 的普通内联复选框
最佳答案
.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>
关于html - 带有文本下方复选框的自定义复选框,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44801472/