Bootstrap 4.0无效反馈未显示 [英] Bootstrap 4.0 invalid-feedback doesn't show
问题描述
我正在使用Bootstrap 4.0(非Beta版)验证,并且在显示无效反馈文本时遇到问题.
I am using the Bootstrap 4.0 (non-beta) validation and have a problem to display the invalid-feedback text.
<div class="form-row">
<label class="form-control-label">Name:</label>
<div class="col-4">
<input class="form-control is-invalid" min="0" type="number"/>
</div>
<div class="col-4">
<div class="invalid-feedback">
Invalid Feedback Text
</div>
</div>
</div>
在上面的示例中,未显示无效反馈文本"文本.
In the above example the text "Invalid Feedback Text" is not displayed.
其原因是无效反馈div不是输入控件的直接同级.
The reason for it is that the invalid-feedback div is not a direct sibling of the the input control.
这一直是alpha/beta版本的问题,但是我给人的印象是,此问题已在4.0版本中修复. (至少相关的门票已关闭.)
This has been an issue with the alpha/beta versions however I was under the impression that this has been fixed in the 4.0 release. (At least the relevant ticket has been closed.)
因此,如果我不能将反馈文本作为相关输入控件的直接同级,该如何使用引导程序验证? (这在我的应用程序中根本不可行.)
So, how can I use the bootstrap validation if I can not have the feedback text as a direct sibling of the relevant input control? (It is simply not feasible in my application.)
这是一个小提琴: https://jsfiddle.net/zygrsrox/
推荐答案
您是对的,其目的是输入是反馈消息的同级.强制显示无效反馈的唯一方法是使用d-block
之类的东西(或某些自定义CSS选择器).也许您可以在验证过程中以编程方式在应用中添加d-block
.
You're right, the intention is that the input is a sibling of the feedback message. The only way you can force the invalid-feeback to show is to use something like d-block
(or some custom CSS selector). Perhaps you can add d-block
programatically in your app during validation.
<div class="form-row">
<label class="form-control-label">Name:</label>
<div class="col-4">
<input class="form-control is-invalid" min="0" type="number"/>
</div>
<div class="col-4">
<div class="invalid-feedback d-block">
Invalid Feedback Text
</div>
</div>
</div>
这篇关于Bootstrap 4.0无效反馈未显示的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!