javascript - Bootstrap 选择输入区域大于父区域

Question

所以我的 bootstrap select 区域比我在小屏幕(移动设备)上想要的要大。所以我想知道是否有某种方法可以强制选择区域不大于父区域。

我的问题通过下面的图片以及片段中重新创建的问题。黑条代表屏幕边缘。

$.ajax({
  url: "https://restcountries.eu/rest/v2/all",
  success: (data) =>
  {
    let select = $("#select-country");
    for (let country of data)
    {
      select.append(`
          <option>
            ${country.name}
          </option>
        `);
    }
    $(select).prop('disabled', false);
    $(select).selectpicker('refresh');
  }
});

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.2/js/bootstrap-select.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.2/css/bootstrap-select.min.css" rel="stylesheet"/>

<div style="width: 300px;">
    <select id='select-country' disabled="true" className="selectpicker" data-live-search="true" title="Choose a country">
    </select>
</div>
<div style="width: 50px; position: absolute; top: 0; left: 300px; height: 200px; background-color: black; z-index: 200">
</div>

Answer 1

试试这个

.dropdown-menu
{
max-width:100%;
}

希望这对您有帮助..