如何使用推/拉在 Bootstrap 中重新排序 .col-*-12 列？-css教程-PHP中文网

如何使用推/拉在 Bootstrap 中重新排序 .col-*-12 列？

Susan Sarandon

发布： 2024-11-03 03:02:03

原创

483 人浏览过

How to Reorder .col-*-12 Columns in Bootstrap Using Push/Pull?

在 Bootstrap 中使用 .col-*-12 的 Push/Pull 重新排序列

在 Bootstrap 中，push 和 pull 指令类可以是用于调整柱相对于周围柱的位置。然而，当涉及到宽度为 12 的列（即 .col-*-12）时，需要注意的是推/拉不能直接改变它们的顺序。

这是因为宽度的总和两列的宽度超出了 Bootstrap 指定的默认 12 列网格宽度。相反，有两种方法可以对这些列重新排序：

1。反转 HTML 列顺序并在较大屏幕上应用顺序类

在这种方法中，您可以交换 HTML 标记中列的顺序，然后使用推/拉来更改它们在较大屏幕上的顺序。例如：

<code class="html"><div class="row">
  <div class="col-xs-12 col-sm-6 col-sm-push-6">
    <p>test2</p>
  </div>

  <div class="col-xs-12 col-sm-6 col-sm-pull-6">
    <p>test1</p>
  </div>
</div></code>

登录后复制

2。使用 CSS 变换进行垂直重新排序

或者，当列在较小的屏幕上垂直堆叠时，您可以使用 CSS 变换来反转列的顺序：

<code class="css">@media (max-width: 767px) {
  .row.reorder-xs {
    transform: rotate(180deg);
    direction: rtl; /* Fix horizontal alignment */
  }

  .row.reorder-xs > [class*="col-"] {
    transform: rotate(-180deg);
    direction: ltr; /* Fix horizontal alignment */
  }
}</code>

登录后复制

请注意 CSS IE9 及更高版本支持转换，因此您可能需要包含供应商前缀以实现兼容性。

以上是如何使用推/拉在 Bootstrap 中重新排序 .col-*-12 列？的详细内容。更多信息请关注PHP中文网其他相关文章！