推/拉類可以用於等寬引導列嗎？

透過推/拉等寬元素重新排序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中文網其他相關文章！