Как показать сообщение проверки под горизонтальными переключателями в Bootstrap 4.1.3?

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 для проверки для простоты, но по какой-то причине не могу понять эту часть. Спасибо!

Answer 1

Я просто боролся с тем же.Этот ответ, вероятно, слишком поздно для вас, но, надеюсь, он поможет кому-то еще.Сообщение проверки отображается там, где оно находится, потому что Bootstrap добавляет display: inline-flex; к родительскому элементу при отображении горизонтальных форм, предотвращая его падение на следующую строку.

Мне удалось переместить сообщение проверки invalid-feedback вне элемента flex layout и заставить его продолжать реагировать на проверку (без дополнительного javascript), поместив перед ним фиктивную радиокнопку с тем же именем.и скрывая это с помощью CSS.Немного бестолково, но это работает.

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