您可以使用推拉功能對具有 .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中文網其他相關文章！