如何在行動裝置和桌上型裝置上以不同方式重新排序 Bootstrap 欄位？

Bootstrap 中具有列順序修改的響應式佈局

在使用Bootstrap 的Web 開發中，與較大螢幕相比，可能需要在行動裝置上以不同的方式對列進行重新排序。此問題探討了一個場景，其中列順序需要從桌面版本上的 1-3-2 切換到行動版本上的 1-2-3。

Bootstrap 4 採用 Flexbox 進行佈局，這通常會導致列的高度相等。此功能對實現本例中所需的桌面佈局提出了挑戰。為了避免這種情況，一種方法是在較大的螢幕（例如 LG）上停用 Flexbox，並利用浮動來實現列的自然對齊。

以下是包含此方法的範例程式碼：

<div>

工作原理：

• 工作原理：
• 運作方式是相對於父行的。
• d-flex 和 d-lg-block 在 LG 螢幕及更大螢幕上停用 Flexbox。

float-left 將列與停用 Flexbox 時左側。

order-* 在行動裝置上啟用 Flexbox 時重新排序列另一個選項是探索涉及 w-auto 的 Flexbox 包裝駭客。然而，上面提出的解決方案提供了在 Bootstrap 中實現所需列順序的簡單方法。

以上是如何在行動裝置和桌上型裝置上以不同方式重新排序 Bootstrap 欄位？的詳細內容。更多資訊請關注PHP中文網其他相關文章！