начальная загрузка входной группы

Question

У меня есть серия входных групп начальной загрузки 4, и я хотел бы, чтобы они были одинакового размера.В документах они добавляют классы, такие как 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 рекомендует добавить size=50 в качестве атрибута.Никакого эффекта для меня.

Это поле группы начальной загрузки Bootstrap, некорректно определяющее размер , выглядело очень похоже на мою проблему.Но я уже пытался добавить фиксированную ширину над CSS, это только усугубляет, <div class="input-group mb-3" style="width:150px"> приводит к:

Answer 1

Вы можете добавить класс ширины столбца к вашим входам.

Например, <input type="text" class="col-4">