首頁  >  文章  >  web前端  >  可以使用推/拉類別在 Bootstrap 中重新排列 .col-*-12 列嗎?

可以使用推/拉類別在 Bootstrap 中重新排列 .col-*-12 列嗎?

Susan Sarandon
Susan Sarandon原創
2024-11-02 00:48:31460瀏覽

Can Push/Pull Classes Be Used to Rearrange .col-*-12 Columns in Bootstrap?

使用Bootstrap Push/Pull 更改.col-*-12 列的列順序

問題:

您的🎜>問題:

您的🎜>問題:

您的🎜>問題:

您的目標使用推/拉指令在行動裝置上的Bootstrap 中重新排列兩個大小相等的欄位(.col-xs-12),顛倒它們的順序。但是,您質疑這種方法對於這種大小的列是否可行。

解決方案:

    推/拉限制:
  1. 推和拉指令旨在改變不同螢幕尺寸的列順序,但它們有限制。使用這些助手無法重新排列佔據整個 12 列網格 (.col-*-12) 的列。
  2. 替代方法:

    • 重新排列HTML 順序:
    • 您可以手動重新排列HTML 中的列順序,並在更寬的螢幕上套用推/拉類以保持所需的佈局。
    • CSS 轉換技巧:
  3. 在行容器上實現 CSS 轉換,以有效反轉列順序。
透過使用方向修飾符與轉換結合使用,確保正確的水平對齊。 請注意,IE9 支援帶有供應商前綴的轉換。

以上是可以使用推/拉類別在 Bootstrap 中重新排列 .col-*-12 列嗎?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

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