Bootstrap：如何将文本放置在复选框侧边

你的代码存在几个关键问题，导致文本和复选框无法并排显示：

• label的for属性值（Desc）与input的id（defcheck）不匹配，不仅影响交互，也不符合表单规范
• 错误使用栅格col类将label和input拆分为垂直布局
• 给复选框添加了form-control类（这是为输入框设计的样式，复选框应使用form-check-input）

直接用Bootstrap官方的form-check组件就能实现需求，以下是修正后的代码：

<div class="col-2">
  <div class="form-check">
    <input type="checkbox" readonly id="defcheck" name="defcheck" class="form-check-input"
           data-toggle="tooltip" data-placement="right">
    <label for="defcheck" class="form-check-label">Default Checkbox</label>
  </div>
</div>

代码说明： #

• form-check容器负责让内部的复选框与文本自动水平排列
• form-check-input是Bootstrap为复选框提供的专用样式类，替代原错误的form-control
• 确保label的for属性与input的id完全一致，点击文本即可触发复选框交互

如果需要文本在左、复选框在右，只需调换input和label的位置：

<div class="col-2">
  <div class="form-check">
    <label for="defcheck" class="form-check-label">Default Checkbox</label>
    <input type="checkbox" readonly id="defcheck" name="defcheck" class="form-check-input"
           data-toggle="tooltip" data-placement="right">
  </div>
</div>

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