Bootstrap 的推/拉類可以在行動裝置上重新排序相同大小的欄位嗎？

使用推/拉重新排序Bootstrap 列：限制和替代方法

處理相同大小的列(.col-*-12) 時，會出現一個常見查詢關於使用Bootstrap 的推拉指令更改順序的可行性。此查詢的目的是了解是否可以在具有移動螢幕尺寸的裝置上反轉兩個此類列的放置。

推/拉的限制

不幸的是，無法重新排序.col-*-12 使用推類和拉類的列。這是因為這些列的總和超過了由 Bootstrap 中的 @grid-columns 變數指定的 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 在螢幕尺寸為767 像素或更小的裝置上反轉垂直堆疊列的順序：

<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>

請注意，此方法需要使用特定於要重新排序的所需列的HTML 類別。

以上是Bootstrap 的推/拉類可以在行動裝置上重新排序相同大小的欄位嗎？的詳細內容。更多資訊請關注PHP中文網其他相關文章！