twitter-bootstrap Bootstrap 4 无效反馈，输入组未显示
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/45673354/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap 4 invalid feedback with input group not displaying
提问by Ian
I have been looking into Bootstrap 4 - beta, however when using .is-invalidwith .input-groupit doesn't seem to show up.
当使用测试版，但是-我一直在寻找到引导4.is-invalid与.input-group它似乎并没有显示出来。
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet" />
<div class="form-group">
<label for="label">Label</label>
<div class="input-group">
<div class="input-group-addon">
label
</div>
<input type="text" value="" name="label" class="form-control is-invalid">
</div>
<div class="invalid-feedback is-invalid">
<strong>Invalid Label</strong>
</div>
</div>How are you meant to display an invalid message while using .input-group?
您打算如何在使用时显示无效消息.input-group？
Adding the following CSS works as a workaround, but it seems odd.
添加以下 CSS 可以作为一种解决方法，但似乎很奇怪。
.form-group.is-invalid {
.invalid-feedback {
display: block;
}
}
采纳答案by ReSpawN
They haven't taken into account their own examples using input group addons and buttons, even with a column model. The markup does only facilitate "neighboring" elements, not parent > neighboring element (there is no CSS rule for that).
他们没有考虑到他们自己使用输入组插件和按钮的例子，即使是列模型。标记只会促进“相邻”元素，而不是父 > 相邻元素（没有 CSS 规则）。
It seems, for now, you should fall back to Alpha 6 or program your own CSS classes accordingly. I've done the same, unfortunately.
目前看来，您应该退回到 Alpha 6 或相应地编写自己的 CSS 类。不幸的是，我也做过同样的事情。
Please note when reading my answer that this was posted just as the beta was released. :)
请注意，在阅读我的回答时，这是在测试版发布时发布的。:)
回答by JG Estiot
Boostrap 4 is very buggy. My suggestion is to replace:
Boostrap 4 有很多问题。我的建议是更换：
<div class="invalid-feedback">
Text here
</div>
With:
和：
<div class="text-danger">
Text here
</div>
And the second one looks virtually the same and will not fail.
第二个看起来几乎一样，不会失败。
For a better look, try:
为了更好看，请尝试：
<div class="text-danger">
<small>Text here</small>
</div>
回答by manix
Working example with a trick using flex-wrapand w-100:
使用flex-wrapand的技巧的工作示例w-100：
<div class="form-group">
<label class="form-control-label">Name</label>
<div class="input-group flex-wrap">
<span class="input-group-addon"><span class="fa fa-lock"></span></span>
<input name="name" class="form-control is-invalid" type="text">
<div class="invalid-feedback w-100">Custom error</div>
</div>
</div>
回答by Sky7ure
The way Bootstrap does override the displayfrom noneto blockis by checking first for a previous is-invalidclass, for example! Check this CSS out:
例如，Bootstrap 覆盖displayfrom noneto 的方法block是首先检查前一个is-invalid类！看看这个CSS：
That means, in case of an error, first is-invalidmust be applied on an element and then invalid-feedbackon another afterward! Like the following in Laravel, for instance:
这意味着，如果出现错误，is-invalid必须首先应用于一个元素，然后再invalid-feedback应用于另一个元素！例如，像 Laravel 中的以下内容：
{{-- Either following an input --}}
<input id="register-password" type="password"
class="form-control @error('register-password') is-invalid @enderror"
name="register-password" required autocomplete="new-password">
@error('register-password')
<span class="invalid-feedback" role="alert">
<strong>{{ $message }}</strong>
</span>
@enderror
{{-- Or separately in DOM --}}
@error('register-password')
<div class="is-invalid"></div>
<span class="invalid-feedback" role="alert">
<strong>{{ $message }}</strong>
</span>
@enderror
回答by Padrón Rocha
I found this solution
我找到了这个解决方案
<div class="input-group ">
<div class="input-group-prepend">
<div class="input-group-text">Start Date</div>
</div>
<input type="text" class="form-control is-invalid" placeholder="Date Input">
<div class="invalid-feedback order-last ">
Error Message
</div>
<div class="input-group-append">
<div class="input-group-text"><i class="fa fa-calendar"></i></div>
</div>
</div>
回答by Juan Carlos Ibarra
To make it looks exactly the same you can use an inline if, in Laravel for example:
为了使它看起来完全相同，您可以使用内联 if，例如在 Laravel 中：
<input name="label" class="{{$errors->has('label') ? 'is-invalid' : '' }}">
@if ($errors->has('label'))
<div class="text-danger" role="alert">
<small>{{ $errors->first('code') }}</small>
</div>
@endif
回答by Akbar Noto
here is my "diy" answer
这是我的“DIY”答案
html
html
<div class="container">
<div class="row p-3">
<div class="col-md-6 mb-3">
<label class="sr-only">End Date/Time</label>
<div class="input-group">
<div class="input-group-prepend ">
<div class="input-group-text error-feedback">Start Date</div>
</div>
<input type="text" class="form-control error-feedback" placeholder="Date Input">
<div class="invalid-feedback order-last ">
Error Message
</div>
<div class="input-group-append error-feedback">
<div class="input-group-text"><i class="fa fa-calendar"></i></div>
</div>
</div>
</div>
</div>
css
css
.error-feedback{
border:1px red solid;
}
I know there is a bit off but, IMO pretty good compared this example
我知道有一点偏差，但是，与此示例相比，IMO 相当不错
