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

在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中文網其他相關文章！