Question

我有一个页面使用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/

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

在Bootstrap4中，input-group helptext不显示为块

1 个答案: