Блог

Главная - Вопросы по программированию - Выпадающий список изменяет свой размер при изменении размера страницы

Выпадающий список изменяет свой размер при изменении размера страницы

#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>