在 Bootstrap4 输入组帮助文本不显示为块答案

【问题标题】：In Bootstrap4 input-group helptext does not display as block在 Bootstrap4 输入组帮助文本不显示为块
【发布时间】：2018-05-23 06:17:18
【问题描述】：

我有一个使用 Bootstrap 4 的页面，其中一个输入控件运行良好。我的问题是当我添加帮助时，它会将它添加到同一行，而不是像我期望的那样在控件下方的下一行。

我怀疑这是输入组/表单组的问题。由于我使用输入组作为字段标签，因此我发现通常非常好的 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/

【问题讨论】：

文档对我来说很清楚：getbootstrap.com/docs/4.0/components/input-group 有一个简洁的例子，标有“你的虚荣 URL”
@soulshined 显示输入组很好，但没有帮助文本，它是导致问题的帮助文本！
“您的虚荣 URL”不被视为您的帮助文本？帮助文本是什么意思？
它只是一个常规标签，它不是表单部分中描述的帮助文本，帮助文本通常比简单的字段标签长而且在我的情况下它在输入之前是在输入之后
我现在明白了。然后，您只需进行简单的修复即可。您的 input-group div 包含所有元素，从而将这些样式应用于它。如果您不希望它与这些元素内联，只需将其移至该 div 下方即可。

标签： css twitter-bootstrap bootstrap-4

【解决方案1】：

根据 Bootstrap discussion:

使用 .form-text 可以轻松实现阻止帮助文本（用于以下输入或更长的帮助文本行）。此类包括 display: block 并添加一些上边距以便与上面的输入保持间距。

但是，您将其添加到具有 input-group 类的父元素中，本质上将与组一起显示，内联。此外，您使用了 HTML 默认内联标记 <small>，它本质上也显示内联。

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

【讨论】：