如何使表单标签（几乎）永不换行？

Question

我希望我的表单标签与输入字段左对齐，这是通过此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：”

Answer 1

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

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