在移动视图中选择下拉菜单超出屏幕

Sav*_*iya 5 html css bootstrap-4

我选择了在移动视图中超出屏幕的下拉菜单。我正在使用引导类form-control。我的代码如下

<select name="service" formControlName="service" class="form-control shadow-none" style="width:100%">
      <option value="Select" selected>Select</option>
      <option value="Sedan" selected>Sedan</option>
      <option value="SUV" selected>SUV</option>
      <option value="Mini" selected>Mini</option>
</select>
Run Code Online (Sandbox Code Playgroud)

在此输入图像描述

任何形式的帮助将不胜感激...

Kul*_*dia 6

这只是因为您正在桌面浏览器中检查移动视图。

在实际设备中,这不会造成任何问题,并根据设备宽度调整宽度。

选择选项列表的打开方式因操作系统而异,这意味着在 Android 设备中,它以下拉列表的形式打开,而在 IO 设备中,它以弹出窗口的形式打开。

尝试在真实设备中打开此页面,而不是在桌面浏览器的移动视图中。

我希望这个答案能够消除您的所有疑虑。

谢谢...


And*_*das 4

由于您使用的是选择元素,因此每个手机操作系统都会使用其默认样式呈现项目列表。

iOS 示例 链接

Android 示例 链接