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

问题描述

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

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="样式表"/><div class="form-group"><label for="label">Label</label><div class="input-group"><div class="input-group-addon">标签

<input type="text" value="" name="label" class="form-control is-invalid">

<div class="invalid-feedback is-invalid"><strong>无效标签</strong>

您打算如何在使用 .input-group 时显示无效消息?

添加以下 CSS 是一种解决方法，但似乎很奇怪.

.form-group.is-invalid {.invalid-feedback {显示:块；}}

解决方案

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

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

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

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>

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

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

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

解决方案

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

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屋！