引导输入组大小答案

【问题标题】：bootstrap input group sizing引导输入组大小
【发布时间】：2019-02-14 20:13:16
【问题描述】：

我有一系列 bootstrap 4 输入组，并希望它们具有相同的大小。在docs 中，他们添加了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>

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

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

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

【问题讨论】：

我觉得你做错了。该复选框在这里不被视为输入。输入组旨在与作为插件的文本输入配对。例如，每个示例附加到文本输入的复选框。

标签： javascript html css bootstrap-4

【解决方案1】：

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

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

【讨论】：

【解决方案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>

【讨论】：