Question

我正在使用Bootstrap 4.0（非beta）验证，并且在显示无效反馈文本时遇到问题。

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

在上面的示例中，文本＆＃34;无效的反馈文本＆＃34;没有显示。

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

这是alpha / beta版本的一个问题，但我认为这已在4.0版本中得到修复。（至少相关的ticket已经关闭。）

那么，如果我不能将反馈文本作为相关输入控件的直接兄弟，那么如何使用引导验证呢？（这在我的申请中根本不可行。）

这是一个小提琴： 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>

Bootstrap 4.0（非beta）。无效反馈并未显示

1 个答案: