」工欲善其事,必先利其器。「—孔子《論語.錄靈公》
首頁 > 程式設計 > Bootstrap 3列重排:巧用`col-lg-push`和`col-lg-pull`

Bootstrap 3列重排:巧用`col-lg-push`和`col-lg-pull`

發佈於2025-04-21
瀏覽:550

How to Rearrange Bootstrap 3 Columns Using `col-lg-push` and `col-lg-pull`?
在Twitter bootstrap 3

To customize the column order, you need to:

Define the order in HTML:

Change the order of the columns in your HTML markup.例如,如果您希望第二個5網格列首先出現,請將其內容放在代碼中的第一個5網格列之前。

將Col col-lg-push-5類添加到要移動向右移動的列。此類將從其原始位置從5列推出列。

將Col-lg-pull-5類添加到您要移至左側的列。 This class will pull the column by 5 columns towards the left.
  1. Example:
  2. 第二
    first
    第三
    說明:
  3. 在此示例中,第二列使用col-lg-push-5的5列向右側推向右側,使其在大屏幕上的第三列之後出現在大屏幕上。使用Col-LG-Pull-5將第一列用5列向左拉,將其帶到第三列之前。這創建了所需的佈局:[5](第二),[5](第一個),[2​​]在桌面上的[5] [5] [2]。 left.
  4. Push:
Moves a column to the right.

Note:
Second
First
Third

The push and pull classes only affect the order of columns on specified screen sizes (in this case, large screens).

The classes have no effect on較小的屏幕尺寸,默認情況下Bootstrap優先考慮移動佈局。
最新教學 更多>

免責聲明: 提供的所有資源部分來自互聯網,如果有侵犯您的版權或其他權益,請說明詳細緣由並提供版權或權益證明然後發到郵箱:[email protected] 我們會在第一時間內為您處理。

Copyright© 2022 湘ICP备2022001581号-3