В Bootstrap4 вводный текст группы помощи не отображается как блок

Question

У меня есть страница, которая использует Bootstrap 4 с одним элементом управления вводом, который работал нормально.Моя проблема в том, что когда я добавляю справку, она добавляет ее в той же строке, а не в следующей строке под элементом управления, как я ожидал.

Я подозреваю, что это проблема с input-group / form-group,Я нахожу в целом очень хорошую документацию Bootstrap очень неясной относительно того, как эти две вещи сочетаются друг с другом, так как я использую входные группы в качестве метки поля.

Это HTML

<div class="input-group">
    <div class="input-group-prepend">
        <label for="undoLocation" id="undoLocationlabel" class="input-group-text">
            Find songs 
        </label>
    </div>
    <select class="custom-select" name="undoLocation" id="undoLocation" aria-describedby="undoLocationHELP">

            <option value="0">
                that are currently in the selected locations
            </option>
            <option selected="selected" value="1">
                that were originally in the selected locations
            </option>

    </select>
    <small id="undoLocationHELP" class="form-text text-muted">
        When files have been moved by SongKong you can use this option to find files currently in the selected all location or find files that were originally in the selected location
    </small>
</div>

, и я создалjsfiddle.https://jsfiddle.net/paultaylor/g64v96fy/1/

Answer 1

Согласно Bootstrap обсуждение :

Блокировать текст справки - для входных данных ниже или для более длинных строк текста справки - можно легко достичь с помощью .form-text.Этот класс включает в себя display: block и добавляет верхнее поле для легкого отступления от указанных выше входных данных.

Однако вы добавили его в родительский элемент с классом input-group, который по своей природе будет отображаться сгруппа, встроенная.Кроме того, вы использовали встроенный тег HTML по умолчанию <small>, который также по своей природе отображает встроенный тег.

Per specs :

Маленький элемент не должен использоваться для расширенных интервалов текста, таких как несколько абзацев, списков или разделов текста.Он предназначен только для коротких циклов текста ...

Даже если вы делаете то, что рекомендуется, и заключаете его в тег <p>, родитель все равно определяет стиль, а группы ввода по своей природевстроены.Поэтому рекомендуется переместить его за пределы div.

<div class="input-group">
  <div class="input-group-prepend">
    <label for="undoLocation" id="undoLocationlabel" class="input-group-text">
       Find songs 
    </label>
  </div>
  <select class="custom-select" name="undoLocation" id="undoLocation" aria-describedby="undoLocationHELP">
    <option value="0">that are currently in the selected locations</option>
    <option selected="selected" value="1">that were originally in the selected locations</option>
  </select>
</div>

<p id="undoLocationHELP" class="form-text text-muted">
  When files have been moved by SongKong you can use this option to find files currently in the selected all location or find files that were originally in the selected location
</p>