Bootstrap 4 меняется размер basic-addon1

CO
На сайте с 01.03.2018
Offline
0
337

Здравствуйте! Почему в bootstrap 4 при вставке иконки, получаются разные размеры? Показал на скриншоте. В bootstrap 3 такого не было.


<form class="form-horizontal needs-validation" id="support" method="POST" novalidate>

<!-- Name -->
<div class="row">
<div class="col-md-3 field-label-responsive">
<label for="name">Ваше имя <span class="required">*</span></label>
</div>
<div class="col-md-6">
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text" id="basic-addon1"><i class="fa fa-user"></i></span>
</div>
<input type="text" name="name" class="form-control" id="name"
placeholder="Например, Владислав" pattern="[А-Яа-я]{4,15}" required autofocus>
<div class="invalid-feedback">
Не меньше 4 и не больше 15 русских букв.
</div>
</div>
</div>
</div>

<div class="row">
<div class="col-md-3 field-label-responsive">
<label for="email">Ваш E-Mail <span class="required">*</span></label>
</div>
<div class="col-md-6">
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text" id="basic-addon2"><i class="fa fa-at"></i></span>
</div>
<input type="email" name="email" class="form-control" id="email"
placeholder="Например, email@gmail.com" required autofocus>
<div class="invalid-feedback">
Введите в формате email@gmail.com.
</div>
</div>
</div>
</div>

<div class="row">
<div class="col-md-3 field-label-responsive">
<label for="subject">Вопрос <span class="required">*</span></label>
</div>
<div class="col-md-6">
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text" id="basic-addon3"><i class="fa fa-share"></i></span>
</div>
<input type="text" name="subject" class="form-control"
id="subject" pattern="[А-Яа-я? ]{4,35}" placeholder="Ваш вопрос" required>
<div class="invalid-feedback">
Не меньше 4 и не больше 35 русских букв.
</div>
</div>
</div>
</div>

<div class="row">
<div class="col-md-3 field-label-responsive">
<label for="message">Сообщение <span class="required">*</span></label>
</div>
<div class="col-md-6">
<div class="input-group mb-3">
<textarea id="message" class="form-control" name="message" placeholder="Ваше сообщение" maxlength="500" required></textarea>
<div class="invalid-feedback">
Поле обязательно для заполнения!
</div>
</div>
</div>
</div>

<div class="container">
<div class="row">
<div class="col-md-6 offset-md-3">
<div class="custom-control custom-checkbox mb-3">
<input type="checkbox" name="agree" class="custom-control-input" id="agree" required>
<label class="custom-control-label text-muted" for="agree">Ставя отметку, я даю согласие на обработку персональных данных.</label>
<div class="invalid-feedback">Вы не приняли соглашение.</div>
</div>
</div>
</div>
</div>

<div class="text-center">
<input type="submit" class="btn btn-outline-primary" value="Задать вопрос"></input>
</div>
</form>

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий