Bootstrap4 делает все входные группы-надстройки одинаковой ширины

Question

Можно ли сделать все готовые надстройки одинаковой ширины?

т.е. на этом снимке экрана я хочу, чтобы электронная почта, лицензионный ключ 1 и лицензионный ключ 2 были одинаковой длины.

Если бы я не использовал надстройки и просто использовал обычные метки и сетку форм, это было бы возможно, но кажется, что готовые аддоны выглядят намного лучше, чем обычные метки.

Соответствующий HTML составляет

<main class="container-fluid">
  <form action="/license.process" name="process" id="process" method="post">
      <div class="input-group mb-2">
          <div class="input-group-prepend">
              <label class="input-group-text" id="licenseEmaillabel">
                  Email
              </label>
          </div>
          <input type="text" name="licenseEmail" value="paultaylor@jthink.net" class="form-control" aria-describedby="licenseEmaillabel">
      </div>
      <div class="input-group mb-2">
          <div class="input-group-prepend">
              <label class="input-group-text" id="licenseKey1label">
                  License Key 1
              </label>
          </div>
          <input type="text" name="licenseKey1" value="51302c021440d595c860233f136731865a12cfad2ce2cc2" class="form-control" aria-describedby="licenseKey1label">
      </div>
      <div class="input-group mb-2">
          <div class="input-group-prepend">
              <label class="input-group-text" id="licenseKey2label">
                  License Key 2
              </label>
          </div>
          <input type="text" name="licenseKey2" value="1e50214376557ba3e1dede6c490f33d07b738515c8c2a03" class="form-control" aria-describedby="licenseKey2label">
      </div>
      <h3 class="error" style="visibility:hidden;">
          &nbsp;
      </h3>
      <input type="submit" name="cancel" value="Cancel" class="btn btn-outline-secondary">
      <input type="submit" name="save" value="Save" class="btn btn-outline-secondary">
      <button onclick="j2html.tags.UnescapedText@d352d4f" type="button" class="btn btn-outline-secondary">
          Get License
      </button>
  </form>
</main>

Answer 1

Так что это на самом деле довольно сложно, потому что каждый лейбл находится в своем собственном элементе div, а не в цепочке родственников.И, кстати, Bootstrap не поддерживает этот тип размеров, только относительные классы размеров (по сути, только делает шрифт больше).Такой вид исключает большинство возможностей, которые я могу придумать, используя свойства flex / child.Тем не менее, я думаю, что жесткое кодирование не является правильным использованием слова в этих обстоятельствах.Но идея та же самая.

Пример использования min-width неверен в этом случае, потому что min-width! == width=xx.Например, если вы установили min-width на 50 пикселей, но 1 строка текста длиннее, у вас все равно будет та же проблема, что и выше.По сути, если вы не хотите устанавливать для них все одно конкретное значение, тогда единственный вариант - использовать Javascript.

Вот мой чистый обходной путь CSS:

.input-group-prepend {
  width : 35%; /*adjust as needed*/
}

.input-group-prepend label {
  width: 100%;
  overflow: hidden;
}

---

Кроме того, вы можете использовать специфичные для Boostrap классы встроенного стиля , но это произвольно, и это одна из проблем, связанных сBootstrap (слишком много встроенных классов загромождают код, и тогда вам придется вручную добавлять его к каждому элементу).Просто предлагая его в качестве альтернативы

Например:

<div class="input-group-prepend w-50"> /* grows to 50% of parent*/
  <label class="input-group-text w-100" id="licenseEmaillabel"> /* grows to 100% of parent */