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;
    }
}

原文由 Ian 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

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

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

原文由 ReSpawN 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

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>

原文由 JG Estiot 发布，翻译遵循 CC BY-SA 3.0 许可协议