您可以使用推拉功能对带有 .col-*-12 的 Bootstrap 列重新排序吗？

使用 .col-*-12 使用推和拉重新组织 Bootstrap 列

在 Bootstrap 网格布局领域，您可能会遇到实例您需要在较小的屏幕（移动设备）上使用 .col-xs-12 类更改列的顺序。重要的是要了解，传统的推拉指令在这种情况下可能无法提供直接的解决方案。

您可以使用推/拉对带有 .col-*-12 的列重新排序吗？

不，您不能使用 .col--push-12 和 .col-*-pull-12 类对 .col--12 列重新排序。这是因为这些列的组合宽度超出了定义的 12 列网格。

重新排序 .col-*-12 列的替代方法：

• 重新排列 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>

• 使用 CSS 转换反转垂直列顺序： 此方法涉及使用 CSS 转换在较小的屏幕上旋转列顺序。

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

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

注意： IE9 及更高版本支持 CSS 转换，但请记住包含供应商前缀以实现跨浏览器兼容性。

以上是您可以使用推拉功能对带有 .col-*-12 的 Bootstrap 列重新排序吗？的详细内容。更多信息请关注PHP中文网其他相关文章！