Bootstrap 4无效反馈,输入组不显示

Question

我一直在研究Bootstrap 4 - beta,但是当它.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>

你打算在使用时显示无效信息是什么意思.input-group？

添加以下CSS作为一种解决方法,但它似乎很奇怪.

.form-group.is-invalid {
    .invalid-feedback {
        display: block;
    }
}

Answer 1

他们没有考虑到他们自己使用输入组插件和按钮的例子，即使是列模型。标记只会促进“相邻”元素，而不是父 > 相邻元素（没有 CSS 规则）。

目前看来，您应该退回到 Alpha 6 或相应地编写自己的 CSS 类。不幸的是，我也做过同样的事情。

请注意，在阅读我的回答时，这是在测试版发布时发布的。:)

Answer 2

添加.is-invalid到.input-group.

如果该invalid-feedback元素前面有一个元素，.is-invalid则会显示该元素——这就是服务器端验证的支持方式。

Answer 3

Boostrap 4非常容易出错。我的建议是更换：

 <div class="invalid-feedback">
 Text here
 </div>

带有：

<div class="text-danger">
Text here
</div>

第二个看起来几乎相同，并且不会失败。

为了更好看，请尝试：

<div class="text-danger">
<small>Text here</small>
</div>

Answer 4

使用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>

Answer 5

例如，Bootstrap 覆盖displayfrom noneto 的方式block是首先检查前一个is-invalid类！看看这个CSS：

这意味着，如果出现错误，is-invalid必须首先应用于一个元素，然后再invalid-feedback应用于另一个元素！例如，像 Laravel 中的以下内容：

{{-- Either following an input --}}

<input type="password" id="registerPassword"
       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

Answer 6

我通过添加d-block这样的方法解决了它：

@error('terms')
    <div class="invalid-feedback d-block" role="alert">
         <strong>{{ $message }}</strong>
    </div>
@enderror

快乐编码！

Bootstrap 文档在这里关于d-block：显示属性