Bootstrap3的form-checkbox与form-control-radio类在Bootstrap4中的等价替代问题

首先明确：form-checkbox和form-control-radio并非Bootstrap 3的官方核心类，大概率是你项目里的自定义类或者第三方扩展类。Bootstrap 4里确实没有这两个类，但可以用官方提供的标准类实现相同的表单控件样式：

• 复选框的Bootstrap 4写法：

  <div class="form-check">
    <input class="form-check-input" type="checkbox" id="yourCheckboxId">
    <label class="form-check-label" for="yourCheckboxId">
      你的复选框标签文本
    </label>
  </div>
  

• 单选框的Bootstrap 4写法：

  <div class="form-check">
    <input class="form-check-input" type="radio" name="radioGroup" id="yourRadioId1" checked>
    <label class="form-check-label" for="yourRadioId1">
      单选选项1
    </label>
  </div>
  <div class="form-check">
    <input class="form-check-input" type="radio" name="radioGroup" id="yourRadioId2">
    <label class="form-check-label" for="yourRadioId2">
      单选选项2
    </label>
  </div>
  

如果原来的form-checkbox和form-control-radio带有项目自定义的样式，你需要把这些自定义样式规则迁移到Bootstrap 4的form-check-input类上，或者直接保留原来的自定义类和官方类一起使用（比如<input class="form-check-input form-checkbox" ...>）。

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