如何使用Bootstrap将Checkbox居中放置在Label下方？

要实现Label在上、Checkbox居中在Label下方的布局，我们需要调整Bootstrap表单的结构和类名，以下是具体步骤和代码：

核心问题修正与思路 #

你原来的代码里给Checkbox用了form-control类，这其实是错误的——form-control是为文本输入框、下拉框等设计的，Checkbox需要用Bootstrap专门的form-check-input类。同时我们要通过布局类让元素垂直排列并居中。

修正后的代码（符合Bootstrap规范） #

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<form>
  <div class="form-row">
    <div class="col-md-2">
      <!-- 用form-check容器管理复选框和标签，text-center让内容居中 -->
      <div class="form-check text-center">
        <!-- d-block让标签独占一行，mb-1增加底部间距提升美观度 -->
        <label class="form-check-label d-block mb-1" for="isNewPrice">New price?</label>
        <!-- form-check-input是Bootstrap复选框的专用样式类 -->
        <input class="form-check-input" type="checkbox" id="isNewPrice">
      </div>
    </div>
  </div>
</form>

自定义样式强化居中效果（可选） #

如果觉得Checkbox的居中效果不够明显，可以添加一点自定义CSS，让它通过margin: auto实现精准居中：

.form-check-input {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

这样即使容器宽度变化，Checkbox也会始终保持在Label的正下方居中位置。

关键改动点说明 #

• 移除了错误的form-control类，替换为Bootstrap复选框专用的form-check-input
• 使用text-center类让容器内的所有内容居中对齐
• 给Label添加d-block类，强制它独占一行，确保Checkbox自动换行到下方
• 用mb-1类给Label添加底部间距，优化布局的视觉层次

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