首頁 >web前端 >css教學 >Bootstrap 4 如何處理不同螢幕尺寸的列排序?

Bootstrap 4 如何處理不同螢幕尺寸的列排序?

Susan Sarandon
Susan Sarandon原創
2024-12-18 10:56:18140瀏覽

How Does Bootstrap 4 Handle Column Ordering Across Different Screen Sizes?

Bootstrap4 中的列排序

為了在不同螢幕尺寸上靈活排列列,Bootstrap 提供了一系列選項。

響應式排序在引導程式中4.0:

Bootstrap 4 消除了對其響應式排序類別使用「xs-」前綴。相反,「push-」和「pull-」修飾符指定視口和移動列的單位數。例如,要在行動裝置上實現所需的1-3-2 順序:

<div>

Bootstrap 4.1 及更高版本中的響應式排序:

Bootstrap 4.1 引進了Flexbox,簡化列排序。訂單類別範圍從“order-1”到“order-12”。欄位可以回應式排序,例如「order-md-12 order-2」(MD 上最後一個,XS 上第二個):

<div>

替代排序方法:

除了響應式排序類別之外,flexbox方向實用程式也提供了另一種方法:

<div>

附加說明

  • 列排序相對於其父.row。
  • 響應類別允許精細控制over order,實現跨多種螢幕尺寸的複雜排列。
  • Bootstrap 4.1以上版本不再支援4.0先前版本中使用的push/pull類別。

以上是Bootstrap 4 如何處理不同螢幕尺寸的列排序?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn