html - 当页面大小时改变下拉菜单的大小

Question

我的表单中有一个选择元素。当我放大或缩小我的浏览器时，选择元素会调整大小并更改其位置。请帮帮我。我也会附上代码。

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

Answer 1

基本上， Bootstrap 类有一些行为会根据屏幕的大小而变化。在您的情况下，您实际上可以应用基本的 HTML center 标记 来覆盖引导类行为并将您的 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>