推/拉类可以用于等宽引导列吗？

通过推/拉等宽元素重新排序 Bootstrap 列

使用 Bootstrap 的网格系统时，调整列的顺序至关重要用于响应式布局。但是，使用推/拉指令对相同大小的列重新排序可能具有挑战性。

推/拉可以用于 .col-*-12 元素吗？

不，不可能更改具有“.col-xs-12.col-xs-push-12”和“.col-xs-12.col-xs-pull-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;
  }

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

注意： CSS 转换是IE9 中支持带有供应商前缀的。

以上是推/拉类可以用于等宽引导列吗？的详细内容。更多信息请关注PHP中文网其他相关文章！