css - Bootstrap 4.0 无效反馈不显示

Question

我正在使用 Bootstrap 4.0(非测试版)验证并且在显示无效反馈文本时遇到问题。

<div class="form-row">
  <label class="form-control-label">Name:</label>
  <div class="col-4">
    <input class="form-control is-invalid" min="0" type="number"/>
  </div>
    <div class="col-4">
    <div class="invalid-feedback">
    Invalid Feedback Text
    </div>
  </div>
</div>

在上面的示例中，没有显示文本“无效的反馈文本”。

原因是无效反馈 div 不是输入控件的直接兄弟。

这一直是 alpha/beta 版本的问题，但我的印象是这已在 4.0 版本中得到修复。 (至少相关的ticket已经关闭了。)

那么，如果我不能将反馈文本作为相关输入控件的直接兄弟项，我该如何使用 Bootstrap 验证？ (这在我的应用程序中根本不可行。)

这是一个 fiddle : https://jsfiddle.net/zygrsrox/

Answer 1

你是对的，意图是输入是反馈消息的兄弟。强制显示无效反馈的唯一方法是使用类似 d-block 的东西(或一些自定义 CSS 选择器)。也许您可以在验证期间以编程方式在您的应用中添加 d-block。

<div class="form-row">
  <label class="form-control-label">Name:</label>
  <div class="col-4">
    <input class="form-control is-invalid" min="0" type="number"/>
  </div>
  <div class="col-4">
    <div class="invalid-feedback d-block">
    Invalid Feedback Text
    </div>
  </div>
</div>