强制在 Bootstrap 4 中显示无效反馈 [英] Force to show invalid-feedback in 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">同意某事

<div class="invalid-feedback">我在表单检查"之外！

...

我想在不使用 JavaScript 的情况下强制显示<div class="invalid-feedback">...(只想使用 Bootstrap CSS).我知道我可以使用像 was-validated 或 is-invalid 这样的 CSS 类，但是 invalid-feedback 不在 form-检查.是否有一种简单的方法可以通过添加与 Bootstrap 相关的 CSS 类来显示 invalid-feedback?

我找到了一个解决方案:

现在我是可见的！

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

解决方案

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

像这样使用

或

在文档中查找更多信息

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

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!

解决方案

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

use it like so

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

or

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

Find more in documentation

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