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

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>