Html 如何在Bootstrap 4.1.3中的水平单选按钮下方显示验证消息？

我试图在Bootstrap4.1.3中的水平对齐单选按钮下面显示验证消息。以下是默认渲染：

请确认您的眼睛颜色为：

对
不
请选择一个选项。

我尝试添加一个中断

，得到以下结果：

请确认您的眼睛颜色为：

对
不

请选择一个选项。

---

但我真正想要的是验证消息直接显示在两个水平单选按钮下面。我使用方便，但由于某些原因无法理解这部分。谢谢

我只使用bootstrap4类创建了一个表单。您可以使用此代码段获得所需的结果

请确认您的眼睛颜色为：
蓝色
黑色
灰色
请选择颜色。

我只是在为同样的事情挣扎。这个答案对你来说可能太晚了，但希望它能帮助其他人。验证消息显示在它所在的位置，因为引导添加了

display:inline flex”，以防止它下降到下一行

我能够将
无效反馈
验证消息重新定位到flex layout元素之外，并通过在其前面放置一个同名的伪单选按钮并用CSS隐藏它，使其继续对验证做出反应（没有任何额外的javascript）。虽然有点老套，但它很管用

<div class="col-sm text-center">
  <div class="form-check form-check-inline">
    <input class="form-check-input" type="radio" id="eye_color_yes" value="yes" name="eye_color" required>
    <label class="form-check-label" for="eye_color_yes">Yes</label>
  </div>
  <div class="form-check form-check-inline">
    <input class="form-check-input" type="radio" id="eye_color_no" value="no" name="eye_color" required>
    <label class="form-check-label" for="eye_color_no">No</label>
  </div>
  <input type="radio" name="eye_color" style="display:none;" required>
  <div class="invalid-feedback">
    Please select an option.
  </div>
</div>


对
不
请选择一个选项。
如果查看当前的html结构，无效的反馈div嵌套在第二列div中。因此，您看到的结果。@I.R.R.使用Bootstrap 4.1.3的验证功能要求它是表单检查表单检查内联div的一部分，否则验证消息不会显示。这无关紧要，因为他正试图验证我假设的内容按钮与一个验证没有。我能想到的唯一一种非javascript的方法需要一些css黑客，如果他想让它在所有视图断点上都看起来很好，可能需要更多的css行。您的示例既没有使用引导验证工具，也没有使用水平单选按钮。验证工具在表单提交时执行检查所有必填表单字段是否有答案，然后如果有必填字段有答案，则给出无效反馈。好的尝试！谢谢，这对我有用。奇怪的是，Bootstrap没有提供一种开箱即用的方法来处理这个问题。哦，好吧。
<hr>
<div class="">
  <div class="col-sm text-center">
    Please confirm that your eye color is:<br>
    <span class="response" id="eye_color"></span>
  </div>
  <div class="col-sm text-center">
    <div class="form-check form-check-inline">
      <input class="form-check-input" type="radio" id="eye_color_yes" value="yes" name="eye_color" required>
      <label class="form-check-label" for="eye_color_yes">Yes</label>
    </div>
    <div class="form-check form-check-inline">
      <input class="form-check-input" type="radio" id="eye_color_no" value="no" name="eye_color" required>
      <label class="form-check-label" for="eye_color_no">No</label>
      <div class="invalid-feedback">
        <br>Please select an option.
      </div>
    </div>
  </div>
</div>
<hr>

<div class="col-sm text-center">
  <div class="form-check form-check-inline">
    <input class="form-check-input" type="radio" id="eye_color_yes" value="yes" name="eye_color" required>
    <label class="form-check-label" for="eye_color_yes">Yes</label>
  </div>
  <div class="form-check form-check-inline">
    <input class="form-check-input" type="radio" id="eye_color_no" value="no" name="eye_color" required>
    <label class="form-check-label" for="eye_color_no">No</label>
  </div>
  <input type="radio" name="eye_color" style="display:none;" required>
  <div class="invalid-feedback">
    Please select an option.
  </div>
</div>