首页  >  文章  >  web前端  >  可以使用推/拉类在 Bootstrap 中重新排列 .col-*-12 列吗?

可以使用推/拉类在 Bootstrap 中重新排列 .col-*-12 列吗?

Susan Sarandon
Susan Sarandon原创
2024-11-02 00:48:31460浏览

Can Push/Pull Classes Be Used to Rearrange .col-*-12 Columns in Bootstrap?

使用 Bootstrap Push/Pull 更改 .col-*-12 列的列顺序

问题:

您的目标使用推/拉指令在移动设备上的 Bootstrap 中重新排列两个大小相等的列 (.col-xs-12),颠倒它们的顺序。但是,您质疑这种方法对于这种大小的列是否可行。

解决方案:

推/拉限制:

推和拉指令旨在改变不同屏幕尺寸的列顺序,但它们有局限性。使用这些助手无法重新排列占据整个 12 列网格 (.col-*-12) 的列。

替代方法:

  1. 重新排列 HTML 顺序:您可以手动重新排列 HTML 中的列顺序,并在更宽的屏幕上应用推/拉类以保持所需的布局。
  2. CSS 转换技巧:

    • 在行容器上实现 CSS 转换,以有效反转列顺序。
    • 通过使用方向修饰符与转换结合使用,确保正确的水平对齐。
    • 请注意,IE9 支持带有供应商前缀的转换。

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

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn