在移动视图中选择下拉菜单离开屏幕

Question

我得到了在移动视图中超出屏幕的选择下拉菜单。我正在使用引导程序类 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>

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

原文由 Savan Padaliya 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

iOS 示例 链接

安卓示例 链接

原文由 Andreas Traganidas 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

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

在实际设备中，这不会引起任何问题，并根据设备宽度调整宽度。

并且选择选项列表的打开方式根据操作系统的不同而不同，这意味着在 Android 设备中它会作为下拉列表打开，而在 IOs 设备中它会像弹出窗口一样打开。

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

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

谢谢…

原文由 KuldipKoradia 发布，翻译遵循 CC BY-SA 4.0 许可协议