Javascript 引导输入组大小调整

我有一系列的引导4输入组，并希望他们是相同的大小。在中，他们添加了类，如

input group sm

或

input group lg

，即使文本大小发生了变化，输入组的总宽度也保持不变

这对我不起作用：

小提琴：

资料来源：

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

长描述性文本：
简称：

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

由于这是自举，当然有大量的相关问题。这个建议添加

size=50

作为属性。对我没有影响

这个看起来和我的问题很相似。但我已经尝试在css上添加固定宽度，这只会使情况更糟，

导致：

---

您可以将列宽类添加到输入中

比如说,，

---

试试这样的方法：

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

{{field.label}
{{field}}

我觉得你这是做错了。该复选框在此处不被视为输入。输入组意味着与文本输入配对作为一个插件。例如，根据示例将复选框附加到文本输入。