引导程序输入组的大小

Question

我有一系列的bootstrap 4输入组，希望它们的大小相同。在docs中，他们添加了input-group-sm或input-group-lg之类的类，即使更改了文本大小，输入组的总宽度也保持不变。

这对我不起作用：

提琴：https://jsfiddle.net/efx7rp4n/

来源：

<div class="container">

  <div class="input-group mb-3">
      <div class="input-group-prepend">
        <span class="input-group-text">Long descriptive text:</span>
      </div>
      <div class="input-group-text">
        <input type="checkbox" aria-label="Checkbox for following text input">
      </div>
    </div>

    <div class="input-group mb-3">
      <div class="input-group-prepend">
        <span class="input-group-text">Short:</span>
      </div>
      <div class="input-group-text">
        <input type="checkbox" aria-label="Checkbox for following text input">
      </div>
    </div>
</div>

如何强制我的输入组具有相同的宽度？

由于这是引导程序，因此当然会有大量相关问题。这个Bootstrap input group sizes建议添加size=50作为属性。对我没有影响。

这个Bootstrap input group field not sizing correctly看起来和我的问题非常相似。但是我已经尝试过在CSS上添加固定宽度，这只会使情况变得更糟，<div class="input-group mb-3" style="width:150px">会导致：

Answer 1

您可以在输入中添加列宽类。

例如，     <input type="text" class="col-4">

Answer 2

尝试这样的事情：

<div class="input-group mb-3">
<div class="input-group-prepend flex-colunm col-4">
    <label class="input-group-text flex-fill ">{{ field.label }}</label>
</div>
{{ field }}
</div>