如何使用「col-lg-push」和「col-lg-pull」重新排列 Bootstrap 3 列？

在Twitter Bootstrap 3 中使用col-lg-push 和col-lg-pull 重新排列列順序

Bootstrap 3 中的列排序允許開發人員針對不同的螢幕尺寸調整行內列的位置。 col-lg-push 和 col-lg-pull 類別專門為此目的而設計，提供對大螢幕裝置（桌上型電腦和筆記型電腦）上的列佈局的控制。

要自訂列順序，您可以需要：

1. 在 HTML 中定義順序：更改 HTML 標籤中列的順序。例如，如果您希望先顯示第二個 5 網格列，請將其內容放置在程式碼中的第一個 5 網格列之前。
2. 使用推播類別： 新增 col- lg-push-5 class 到您想要向右移動的欄位。該類別會將列從原始位置推 5 列。
3. 使用 pull 類別： 將 col-lg-pull-5 類別加入到要向左移動的欄位。該類別會將列向左拉 5 列。

範例：

<div class='row'>
  <div class='col-lg-5 col-lg-push-5'>Second</div>
  <div class='col-lg-5 col-lg-pull-5'>First</div>
  <div class='col-lg-2'>Third</div>
</div>

說明：

在此範例中，使用下列方法將第二列向右推5 列col-lg-push-5，使其出現在大螢幕上的第三列之後。使用 col-lg-pull-5 將第一列向左拉 5 列，使其位於第三列之前。這將創建所需的佈局：[5]（第二個）、[5]（第一個）、[2]（行動裝置）和 [5][5][2]（桌面裝置）。

了解拉動和推：

• 拉： 將列移到
• 🎜> 向右移動一列。

注意：

Push 和 Pull 類別僅影響指定螢幕尺寸上的列順序（在本例中，大螢幕）。
• 這些類別對較小的螢幕尺寸沒有影響，因為 Bootstrap 預設優先考慮行動佈局。

以上是如何使用「col-lg-push」和「col-lg-pull」重新排列 Bootstrap 3 列？的詳細內容。更多資訊請關注PHP中文網其他相關文章！