如何使用'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中文网其他相关文章！