Bootstrap 4 无线电验证

我需要在使用 Bootstrap 4 的页面中使用 Radio 元素进行表单验证方面的一些帮助。

我需要在单选元素下方添加错误消息：

<div class="invalid-feedback">Please choose an option</div>

我的表单中有以下代码：

          <section>
            <h6>Lorem Ipsum</h6>
            <p>Donec molestie orci rhoncus, congue magna facilisis, laoreet sapien. Nam.</p>

            <div class="form-check form-check-inline">
              <input class="form-check-input" type="radio" name="agreeMarketProfiling" id="agreeMarketProfiling1" value="1" required>
              <label class="form-check-label" for="agreeMarketProfiling1">I AGREE</label>
            </div>
            <div class="form-check form-check-inline">
              <input class="form-check-input" type="radio" name="agreeMarketProfiling" id="agreeMarketProfiling2" value="0" required>
              <label class="form-check-label" for="agreeMarketProfiling2">DON'T AGREE</label>
            </div>

          </section>

如果我添加invalid-feedback在 - 的里面form-check元素，如果我将其放在元素之外，我会在单个元素下方看到错误消息form-check元素不会出现错误消息。

这样做的正确方法是什么？

我解决这个问题的方法是将invalid-feedbackdiv 在最后一个表单检查中，然后使用边距按照我想要的方式排列 div。

Inline:

     <div class="form-check form-check-inline">
          <input class="form-check-input" type="radio" name="agreeMarketProfiling" id="agreeMarketProfiling1" value="1" required>
          <label class="form-check-label" for="agreeMarketProfiling1">I AGREE</label>
        </div>
        <div class="form-check form-check-inline">
          <input class="form-check-input" type="radio" name="agreeMarketProfiling" id="agreeMarketProfiling2" value="0" required>
          <label class="form-check-label" for="agreeMarketProfiling2">DON'T AGREE</label>
          <div class="invalid-feedback" style="margin-left: 1em">Please choose an option</div>
    </div>

非内联:

     <div class="form-check">
          <input class="form-check-input" type="radio" name="agreeMarketProfiling" id="agreeMarketProfiling1" value="1" required>
          <label class="form-check-label" for="agreeMarketProfiling1">I AGREE</label>
        </div>
        <div class="form-check">
          <input class="form-check-input" type="radio" name="agreeMarketProfiling" id="agreeMarketProfiling2" value="0" required>
          <label class="form-check-label" for="agreeMarketProfiling2">DON'T AGREE</label>
          <div class="invalid-feedback" style="margin-left: -1.25em">Please choose an option</div>
    </div>