css - 强制在 Bootstrap 4 中显示无效反馈

Question

假设我有这样的 HTML:

...
<div class="form-group">
    <div class="form-check">
        <input class="form-check-input" type="checkbox" id="invalidCheck">
        <label class="form-check-label" for="invalidCheck">
            Agree to something
        </label>
    </div>

    <div class="invalid-feedback">
        I am outside of `form-check`!
    </div>
</div>
...

我想强制显示<div class="invalid-feedback">...不使用 JavaScript(只想使用 Bootstrap CSS)。我知道我可以使用像 was-validated 这样的 CSS 类或 is-invalid ，但是 invalid-feedback在form-check之外.有没有一种简单易行的方法来显示invalid-feedback通过添加 Bootstrap 相关的 CSS 类？

我找到了一个解决方案:

<div class="invalid-feedback d-block">
    Now I am visible!
</div>

但我觉得这是一个 hacky 解决方案。请指教!

Answer 1

使用显示类手动显示它，例如 d-block

像这样使用

<div class="valid-feedback d-block"> 

或

<div class="invalid-feedback d-block">

Find more in documentation