Question

我正在尝试在Bootstrap 4.1.3中水平对齐的单选按钮下方显示验证消息。以下是默认渲染：

<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">
        Please select an option.
      </div>
    </div>
  </div>
</div>
<hr>

我尝试添加一个中断<br>，并得到了以下提示：

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

但是我真正想要的是验证消息直接出现在两个水平单选按钮的下方。我正在轻松使用Bootstrap 4.1.3's validation，但由于某些原因无法弄清楚这部分。谢谢！

Answer 1

我只是在为同一件事而挣扎。对于您来说，这个答案可能为时已晚，但希望对您有所帮助。验证消息的显示位置是因为Bootstrap在显示水平表单时在父元素上添加了display: inline-flex;，从而防止其下降到下一行。

我能够将invalid-feedback验证消息重新放置在flex布局元素之外，并通过在其前面放置一个具有相同名称的虚拟单选按钮来继续对验证做出反应（没有任何额外的javascript）。用CSS隐藏它。有点hacky，但是可以用。

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

Answer 2

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

<div class="container">
  <form >
   <div class="col-sm-6">
   Please confirm that your eye color is:
   </div>
    <div class="form-check-inline">
      <label class="form-check-label" for="radio1">
        <input type="radio" class="form-check-input" id="radio1" name="optradio" value="option1" checked>Blue
      </label>
    </div>
    <div class="form-check-inline">
      <label class="form-check-label" for="radio2">
        <input type="radio" class="form-check-input" id="radio2" name="optradio" value="option2">Black
      </label>
    </div>
    <div class="form-check-inline">
      <label class="form-check-label">
        <input type="radio" class="form-check-input">Grey
      </label>
    </div>
    <div class="text-danger">
     Please select color.
  </div>
    
  </form>
</div>

在下面的代码处：

<div class="text-danger">
     Please select color.
  </div>

您可以在下面的代码段中使用它来显示错误消息：

<div class="alert alert-danger">
    <strong>Warning!</strong> Please select color.
  </div>

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

2 个答案: