Bootstrap 4中如何仅用CSS强制显示外部invalid-feedback？

好问题！直接给invalid-feedback加d-block虽然能快速解决显示问题，但确实没有贴合Bootstrap表单验证的语义化设计。这里提供两种更规范的方案，根据你的结构需求选择：

方案1：调整HTML结构（推荐） #

Bootstrap的表单验证样式是基于控件与提示信息的相邻结构设计的，把invalid-feedback放到form-check内部，就能利用原生的验证状态类（is-invalid或was-validated）自动控制显示，无需额外的通用布局类：

<div class="form-group">
  <div class="form-check">
    <input class="form-check-input is-invalid" type="checkbox" id="invalidCheck">
    <label class="form-check-label" for="invalidCheck">
      Agree to something
    </label>
    <!-- 把invalid-feedback移到form-check内部 -->
    <div class="invalid-feedback">
      You must agree before submitting!
    </div>
  </div>
</div>

这样做的好处：

• 完全遵循Bootstrap的表单验证语义，当checkbox处于无效状态（比如未勾选且设置了required，或手动添加is-invalid）时，提示会自动显示
• 不需要额外的布局类，样式行为和Bootstrap的其他表单控件保持一致

方案2：保留现有结构，用Bootstrap状态类配合显示类 #

如果因为业务限制无法调整HTML结构，你可以给外层的form-group添加was-validated类，同时给checkbox添加is-invalid类，再结合d-block来触发显示——虽然还是用到了d-block，但结合验证状态类后，语义上更清晰：

<div class="form-group was-validated">
  <div class="form-check">
    <input class="form-check-input is-invalid" type="checkbox" id="invalidCheck">
    <label class="form-check-label" for="invalidCheck">
      Agree to something
    </label>
  </div>
  <div class="invalid-feedback d-block">
    I am outside of form-check but visible!
  </div>
</div>

这里的was-validated和is-invalid明确标记了表单的验证状态，d-block只是用来打破默认的隐藏规则，相比单独用d-block更符合语义化的要求。

内容的提问来源于stack exchange，提问作者young-ceo