Bootstrap选择输入区域大于父区域 [英] Bootstrap select input area bigger than parent

问题描述

因此，我的引导程序选择区域大于在小屏幕(移动设备)上的区域.所以我想知道是否有某种方法可以迫使选择区域不大于父区域.

So my bootstrap select's area is bigger than I'd like when it's on small screens (mobile). So I was wondering if there was some way to force the selection area to not be bigger than the parent.

我的问题通过下面的图片以及代码段中的重新生成的问题进行了说明.黑条表示屏幕边缘.

My problem via image below as well as recreated issue in snippet. The black bar represents edge of screen.

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

推荐答案

尝试一下

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

希望这会有所帮助.

这篇关于Bootstrap选择输入区域大于父区域的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！