Css 在Bootstrap4输入组中，helptext不显示为块

我有一个页面，使用Bootstrap4和一个单一的输入控件，工作正常。我的问题是，当我添加帮助时，它会将其添加到同一行，而不是我所期望的控件下的下一行

我怀疑这是输入组/表单组的问题。我发现一般来说非常好的引导文档非常不清楚这两个东西是如何结合在一起的，因为我使用inputgroups作为字段标签

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

寻找歌曲
当前位于选定位置的
最初位于选定位置的
当SongKong移动了文件后，您可以使用此选项查找当前位于所选全部位置的文件，或查找最初位于所选位置的文件

我已经创建了一个JSFIDLE。

根据引导：

使用.form text可以轻松地为以下输入或更长的帮助文本行阻止帮助文本。该类包括display:block，并添加一些上边距，以便与上面的输入隔开

但是，您将其添加到具有

输入组的父元素中

类，从本质上讲，它将与组内联显示。此外，您还使用了一个HTML默认内联标记

，它本质上也显示内联

Per:

小元素不应用于文本的扩展范围，例如多个段落、列表或部分文本。它只适用于短时间运行的文本

即使您按照建议进行操作并将其包装在

标记中，父级仍然定义样式，并且输入组本质上是内联的。 因此，建议将其移到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>

寻找歌曲
当前位于选定位置的
最初位于选定位置的

当SongKong移动了文件后，您可以使用此选项查找当前位于所选全部位置的文件，或查找最初位于所选位置的文件

文档对我来说非常清楚：有一个名为“Your vanity URL”@soulshined的简明示例显示了inputgroup fine，但没有帮助文本，是帮助文本导致了问题！“你的虚荣URL”不被视为对你的帮助文本？你所说的帮助文本是什么意思？它只是一个普通的标签，而不是表单部分所描述的帮助文本，帮助文本通常比简单的字段标签长，在我的例子中，它在输入之前，在输入之后，我现在明白了。然后你就有了一个简单的解决方法。您的

input组

div包含所有元素，从而将这些样式应用于它。如果您不希望它与这些元素内联，只需将其移动到该div的下方即可。