Bootstrap 4无效反馈，但未显示输入组 [英] Bootstrap 4 invalid feedback with input group not displaying

问题描述

我一直在研究Bootstrap 4(测试版)，但是，当将 .is-invalid 与 .input-group 一起使用时，它似乎没有出现.

I have been looking into Bootstrap 4 - beta, however when using .is-invalid with .input-group it doesn't seem to show up.

<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 时如何显示无效消息?

How are you meant to display an invalid message while using .input-group?

添加以下CSS可以解决此问题，但这似乎很奇怪.

Adding the following CSS works as a workaround, but it seems odd.

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

推荐答案

即使使用列模型，他们也没有考虑使用输入组插件和按钮的示例.标记仅促进邻居"元素，而不促进父元素>邻居元素(没有CSS规则).

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).

现在看来，您应该回到Alpha 6或相应地编写自己的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.

在阅读我的答案时，请注意，该评论是在测试版发布时发布的.:)

Please note when reading my answer that this was posted just as the beta was released. :)

这篇关于Bootstrap 4无效反馈，但未显示输入组的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！