#html #css #bootstrap-4
#HTML #css #bootstrap-4
Вопрос:
У меня в форме есть элемент select. Когда я увеличиваю или уменьшаю масштаб своего браузера, элемент select изменяется в размерах и меняет свое положение. Пожалуйста, помогите мне. Я также приложу код.
<div class="form-group">
<select class="form-control" style="height:50px;" id="search_color">
<option value=" " hidden>Color</option>
<option value="0">Red</option>
<option value="1">Green</option>
<option value="2">Blue</option>
<option value="3">Yellow</option>
<option value="4">Orange</option>
<option value="5">Purple</option>
<option value="6">Grey</option>
<option value="7">Multicolor</option>
</select>
</div>
Комментарии:
1. что вы имеете в виду, изменяя его положение?
2. можете ли вы прикрепить скриншот и каков ваш ожидаемый результат
3. Изначально выпадающий список находится в центре страницы, когда я увеличиваю или уменьшаю масштаб страницы, выпадающий список находится не в центре, он перемещается в угол страницы.
4. хорошо, я опубликую свой ответ, я думаю, вы можете использовать базовый тег center для этого, потому что из-за класса div он изменяет положение вашего выбора
Ответ №1:
В принципе, поведение классов начальной загрузки варьируется в зависимости от размера экрана. В вашем случае вы действительно можете применить базовый HTML center tag , чтобы переопределить поведение класса bootstrap и сохранить ваш dropdown option в центре экрана.
Попробуйте этот:
<div class="form-group">
<center>
<select class="form-control" style="height:50px;" id="search_color">
<option value=" " hidden>Color</option>
<option value="0">Red</option>
<option value="1">Green</option>
<option value="2">Blue</option>
<option value="3">Yellow</option>
<option value="4">Orange</option>
<option value="5">Purple</option>
<option value="6">Grey</option>
<option value="7">Multicolor</option>
</select>
</center>
</div>