强制在Bootstrap 4中显示无效反馈 [英] Force to show invalid-feedback in Bootstrap 4

问题描述

假设我有这样的HTML:

Let's say I have HTML like this:

...
<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>
...

我想强制显示不使用JavaScript的<div class="invalid-feedback">...(仅想使用Bootstrap CSS).而且我知道我可以使用CSS类，例如was-validated或is-invalid，但是invalid-feedback在form-check之外.通过添加与Bootstrap相关的CSS类，是否有一种简便的方法来显示invalid-feedback?

I want to force to show the <div class="invalid-feedback">... without using JavaScript (want to use Bootstrap CSS only). And I know I can use CSS classes like was-validated or is-invalid, but invalid-feedback is outside of form-check. Is there an easy and simple way to show invalid-feedback by adding Bootstrap related CSS classes?

我找到了一个解决方案:

I found one solution:

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

但是我觉得这是一个棘手的解决方案.请指教！

But I feel like it's a hacky solution. Please advise!

推荐答案

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

Use display classes to display it manually for example d-block

像这样使用它

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

或

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

在文档中查找更多信息

这篇关于强制在Bootstrap 4中显示无效反馈的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！