如何使用'col-lg-push”和'col-lg-pull”在 Bootstrap 3 中操作列顺序？

在 Twitter Bootstrap 3 中使用 col-lg-push 和 col-lg-pull 进行列顺序操作

Twitter Bootstrap 方便的 col-lg- Push 和 col-lg-pull 类提供了在较大屏幕（桌面或

理解语法

这些类的语法是：

• col-vp-push-x：推送列 x 右侧的列数，从视口上的正常位置开始大于或等于vp.
• col-vp-pull-x：从大于或等于 vp 的视口上的正常位置开始，将列 x 列向左拉动。

这里，vp 可以是 xs、sm、md 或 lg，而 x 的范围是 1 到12.

示例场景

考虑以下示例，您要显示 3 列的网格：2 列的长度为 5，1 列的长度为 2。

• 桌面视图 (≥ lg)：水平显示 [5] [5] [2]。
• 移动视图 (≤ sm)：显示 [5]（第二个）[5]（第一） [2]

代码：

<div class="row">
  <div class="col-lg-5 col-lg-push-5"></div>
  <div class="col-lg-5 col-lg-pull-5"></div>
  <div class="col-lg-2"></div>
</div>

说明：

• 第一个 col-lg -5 元素向右推 5 列，因此它将在正常后开始 5 列
• 第二个 col-lg-5 元素向左拉 5 列，因此它将比正常位置早 5 列开始。
• col-lg-2 元素保留在它的默认顺序。

注意：为了确保正确的功能，请确保标记中元素的顺序与在大屏幕上所需的顺序。

以上是如何使用'col-lg-push”和'col-lg-pull”在 Bootstrap 3 中操作列顺序？的详细内容。更多信息请关注PHP中文网其他相关文章！