Select 下拉菜單在移動視圖中超出屏幕

Question

我得到了 select 下拉列表，它在移動視圖中超出了屏幕。 我正在使用 bootstrap class 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>

任何形式的幫助將不勝感激......

Answer 1

這只是因為您正在查看桌面瀏覽器中的移動視圖。

在實際設備中，這不會導致任何問題，並根據設備寬度調整寬度。

並且選擇選項列表根據操作系統的不同打開方式意味着在 Android 設備中它作為下拉列表打開，而在 IO 設備中它像彈出窗口一樣打開。

嘗試在真實設備中打開此頁面，而不是在桌面瀏覽器的移動視圖中。

希望這個回答能解開你所有的疑惑。

謝謝...

Answer 2

由於您使用的是 select 元素，因此每個手機操作系統都將使用其默認樣式呈現項目列表。

iOS 示例鏈接

安卓示例鏈接

Answer 3

如果您正在開發響應式 Web 應用程序，有時會發生這些情況。 這些可能是由於瀏覽器不兼容導致異常行為造成的。

我建議使用屬性auto

<select name="service" formControlName="service" class="form-control shadow-none" style="width:auto">
      <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>

編輯：嘗試放置位置：絕對寬度：100%。 應該將該 div 拉到容器之外。 您要求一個元素比其父元素拉伸得更寬，這通常是不推薦的做法。

Answer 4

您可以嘗試在移動設備上使用媒體查詢，並在以特定分辨率加載時為表單元素提供固定寬度： @mediaonlyscreenand(max-width:600px){select{width:200px!important;}}

Answer 5

這是正常的。 當您查看瀏覽器的移動模式時，有一種機制可以清楚地顯示您的選擇和下拉菜單。 當您使用真實的移動設備打開這些部分時，它們看起來會有所不同。

還有另一種方法可以管理這個。 也就是說，您將不使用 select 標簽而是使用其他標簽手動創建選擇或下拉菜單。

Answer 6

嘗試使用其他瀏覽器，然后使用 chrome，錯誤將得到解決。