Я следую вместе с документацией и пытаюсь реализовать ряд входных данных для формы регистрации, которую я создаю.Соответствующий HTML:
<div class="row">
<div class="my-5 py-4 offset-md-4 col-md-5 col-lg-4 justify-content-center align-items-center">
<form name="fos_user_registration_form" method="post" action="/app_dev.php/register/" class="fos_user_registration_register">
<div class="form-group">
<label for="fos_user_registration_form_name" class="required">Name</label>
<input type="text" id="fos_user_registration_form_name" name="fos_user_registration_form[name]" required="required" class="form-control" />
</div>
<div class="form-group">
<label for="fos_user_registration_form_line1" class="required">Address Line 1</label>
<input type="text" id="fos_user_registration_form_line1" name="fos_user_registration_form[line1]" required="required" class="form-control" />
</div>
<div class="form-group">
<label for="fos_user_registration_form_line2">Address Line 2 (optional)</label>
<input type="text" id="fos_user_registration_form_line2" name="fos_user_registration_form[line2]" class="form-control" />
</div>
<div class="form-row">
<div class="form-group col-md-4">
<label for="fos_user_registration_form_city" class="required">City</label>
<input type="text" id="fos_user_registration_form_city" name="fos_user_registration_form[city]" required="required" />
</div>
<div class="form-group col-md-4">
<label for="fos_user_registration_form_state" class="required">State</label>
<select id="fos_user_registration_form_state" name="fos_user_registration_form[state]"><option value="AL">Alabama</option><option value="AK">Alaska</option><option value="AZ">Arizona</option><option value="AR">Arkansas</option><option value="CA">California</option><option value="CO">Colorado</option><option value="CT">Connecticut</option><option value="DE">Delaware</option><option value="FL">Florida</option><option value="GA">Georgia</option><option value="HI">Hawaii</option><option value="ID">Idaho</option><option value="IL">Illinois</option><option value="IN">Indiana</option><option value="IA">Iowa</option><option value="KS">Kansas</option><option value="KY">Kentucky</option><option value="LA">Louisiana</option><option value="ME">Maine</option><option value="MD">Maryland</option><option value="MA">Massachusetts</option><option value="MI">Michigan</option><option value="MN">Minnesota</option><option value="MS">Mississippi</option><option value="MO">Missouri</option><option value="MT">Montana</option><option value="NE">Nebraska</option><option value="NV">Nevada</option><option value="NH">New Hampshire</option><option value="NJ">New Jersey</option><option value="NM">New Mexico</option><option value="NY">New York</option><option value="NC">North Carolina</option><option value="ND">North Dakota</option><option value="OH">Ohio</option><option value="OK">Oklahoma</option><option value="OR">Oregon</option><option value="PA">Pennsylvania</option><option value="RI">Rhode Island</option><option value="SC">South Carolina</option><option value="SD">South Dakota</option><option value="TN">Tennessee</option><option value="TX">Texas</option><option value="UT">Utah</option><option value="VT">Vermont</option><option value="VA">Virginia</option><option value="WA">Washington</option><option value="WV">West Virginia</option><option value="WI">Wisconsin</option><option value="WY">Wyoming</option></select>
</div>
<div class="form-group col-md-4">
<label for="fos_user_registration_form_zipcode" class="required">Zipcode</label>
<input type="text" id="fos_user_registration_form_zipcode" name="fos_user_registration_form[zipcode]" required="required" />
</div>
</div>
<div class="form-group">
<label for="fos_user_registration_form_phone">Phone (optional)</label>
<input type="text" id="fos_user_registration_form_phone" name="fos_user_registration_form[phone]" />
</div>
<small>We only ship within the US</small>
<div>
<button type="submit" id="register-submit-btn" class="btn btn-burnt-orange">Register account</button>
</div>
<input type="hidden" id="fos_user_registration_form__token" name="fos_user_registration_form[_token]" value="knrAUCbJNdBKVtkqR57qEzOAExZaqWmleKA4nRBiKeg" />
</form>
</div>
</div>
Что приводит к:
Независимо от ширины столбца, я даю три элемента в строке, они просто не вписываются в ряд.Я предполагаю, что отчасти проблема заключается в раскрытии состояния ... его ширина не уменьшается так сильно, как хотелось бы.Но даже если я установлю ширину города и почтового индекса, так что общая ширина будет меньше 12 столбцов, выравнивание по-прежнему выполняется аналогично скриншоту.
Одна важная вещь, которую стоит отметить - я могу 'действительно изменить класс / атрибуты оболочки div.Это проект Symfony, так что элемент-обертка является основой для всех моих форм.Остальные выглядят правильно, поэтому я действительно не хочу связываться с этим просто ради этого выброса.