У меня проблемы с тем, чтобы сделать готовые дополнения такой же ширины. Я использую иконки Font Awesome, а размер предоплаты определяется для каждого конкретного значка. Примерно год назад я нашел другую ветку с описанием моей точной проблемы, но ответа не было.
Bootstrap 4 делает все input-group-addon одинаковой ширины
Вот скриншот моей проблемы:
Я безуспешно пытался использовать различные 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>2 ответа
Я попробовал ваш тот же фрагмент кода, с некоторыми изменениями CSS, он работает для меня. Я только что добавил следующий css. Пожалуйста, используйте этот css, это решит проблему ширины prepend / addon.
.input-group-text {
width: 40px;
}
.input-group-text span {
margin: 0 auto;
}Вот также URL-адрес фрагмента, bootstrap-input-group-prepend-addon-width-issue
Я думаю, что самый простой ответ с этим - сетка CSS.
.wrapper
{
display:grid;
grid-template-rows: repeat(3,1fr) 2fr;
grid-template-columns: 15% 85%;
grid-row-gap:1rem
}
Затем назначьте значки первому столбцу, а входные данные - второму.
Надеюсь, это решило вашу проблему.