3

我希望我的表单标签与输入字段左对齐，这是我用这个 HTML 实现的：

<fieldset>
    <div class="form-group row">
        <label class="col-auto col-form-label-sm">Name</label>
        <div class="col">
            <input type="text" class="form-control form-control-sm" required />
        </div>
    </div>
    <div class="form-group row">
        <label class="col-auto col-form-label-sm">Really Really Long Name</label>
        <div class="col">
            <input type="text" class="form-control form-control-sm" required />
        </div>
    </div>
</fieldset>

我使用col-auto我的标签是因为我希望标签适合并且永远不会换行，并且输入字段可以获得水平空间的剩余部分。唯一的问题是我没有意识到这col-auto只是每行计算，所以我最终得到了不同宽度的标签列！

有没有办法让所有标签列自动调整大小以适合最宽的标签但都具有相同的宽度？自动调整大小尤其重要，因为我们支持多种语言，并且不会提前知道每个可能的标签文本的硬编码宽度。

编辑：

这是我使用时的样子col-auto

在此处输入图像描述

红线标记了使用col-auto. 绿线表示我希望如何调整所有列的大小，我希望它们都是最宽标签列的宽度，在这种情况下是“说明 URL：”的宽度

4

1 回答 1

3

您是否尝试过设置宽度并使用.text-nowrap？我最近有一个类似的问题，这对我有用。

https://getbootstrap.com/docs/4.0/utilities/text/

于 2018-06-20T20:11:20.830 回答