时间戳

首页 > 解决方案 > 强制在 Bootstrap 4 中显示无效反馈

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

问题描述

假设我有这样的 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而且我知道我可以使用类似or的CSS 类is-invalid，但invalid-feedback在form-check. invalid-feedback通过添加 Bootstrap 相关的 CSS 类，是否有一种简单易行的方式来展示？

我找到了一种解决方案：

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

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

标签： csstwitter-bootstrapbootstrap-4

解决方案

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

像这样使用它

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

或者

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

在文档中查找更多信息

推荐阅读