Начальная настройка input-group-prepend / addon width

Question

У меня проблемы с созданием надстроек надстроек одинаковой ширины. Я использую иконки Font Awesome, а размер предоплаты определяется для каждого конкретного значка. Примерно год назад я нашел другую ветку с описанием моей точной проблемы, но ответа не было.

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

Вот скриншот моей проблемы:

Я безуспешно пытался использовать различные CSS-твики, в том числе и ту, что описана в вышеупомянутой теме.

Соответствующий HTML:

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row body-main-bg">
  <div class="col-sm-4 my-3">
    <div class="input-group">
      <div class="input-group-prepend">
        <span class="input-group-text">
                                <span class="fa fa-user"></span>
        </span>
      </div>
      <input type="text" class="form-control" placeholder="Name">
    </div>
  </div>
</div>
<div class="row body-main-bg">
  <div class="col-sm-4 mb-3">
    <div class="input-group">
      <div class="input-group-prepend">
        <span class="input-group-text">
                                <span class="fa fa-envelope"></span>
        </span>
      </div>
      <input type="text" class="form-control" placeholder="Email">
    </div>
  </div>
</div>
<div class="row body-main-bg">
  <div class="col-sm-4 mb-3">
    <div class="input-group">
      <div class="input-group-prepend">
        <span class="input-group-text">
                                <span class="fa fa-ellipsis-v"></span>
        </span>
      </div>
      <input type="text" class="form-control" placeholder="Subject">
    </div>
  </div>
</div>
<div class="row body-main-bg">
  <div class="col-sm-4 mb-3">
    <div class="input-group">
      <div class="input-group-prepend">
        <span class="input-group-text">
                                <span class="fa fa-pencil"></span>
        </span>
      </div>
      <textarea class="form-control" id="exampleFormControlTextarea1" rows="3" placeholder="Message"></textarea>
    </div>
  </div>
</div>

Answer 1

Я попробовал ваш тот же фрагмент кода, только с некоторыми настройками CSS, он работает для меня. Я просто добавил следующий CSS, Пожалуйста, используйте эту CSS, это решит проблему ширины prepend / addon.

.input-group-text {
    width: 40px;
}
.input-group-text span {
    margin: 0 auto;
}

Здесь также указан URL-адрес фрагмента, самозагрузка-вход-группа перед именем-аддон-ширина-выпуск

Answer 2

Я думаю, что самый простой ответ на этот вопрос - сетка css.

.wrapper
{
display:grid;
grid-template-rows: repeat(3,1fr) 2fr;
grid-template-columns: 15% 85%;
grid-row-gap:1rem
}

Затем назначьте значки для первого столбца и введите данные для второго.

Надеюсь, это решило вашу проблему.