Bolehkah Kelas Tolak/Tarik Digunakan untuk Lajur Bootstrap Lebar Sama?

Menyusun Semula Lajur Bootstrap dengan Tekan/Tarik untuk Elemen Sama Lebar

Apabila bekerja dengan sistem grid Bootstrap, melaraskan susunan lajur adalah penting untuk susun atur responsif. Walau bagaimanapun, adalah sukar untuk menyusun semula lajur yang sama saiz menggunakan arahan tolak/tarik.

Bolehkah Tolak/Tarik Digunakan untuk .col-*-12 Elemen?

Tidak, tidak boleh menukar susunan lajur dengan kelas seperti ".col-xs-12.col-xs-push-12" dan ".col-xs-12.col-xs-pull-12" kerana lebar gabungan melebihi definisi grid 12 lajur Bootstrap.

Penyelesaian Alternatif:

1. Menyusun Semula dalam HTML dan Menggunakan Kelas Memesan untuk Skrin Yang Lebih Besar

Susun semula susunan lajur dalam HTML dan gunakan kelas tolak/tarik untuk mencapai susunan yang diingini pada skrin yang lebih besar:

<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. Transformasi CSS untuk Susunan Semula Lajur Menegak

Gunakan transformasi CSS untuk membalikkan susunan lajur yang dipaparkan secara menegak di bawah satu sama lain:

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

Nota: Transformasi CSS ialah disokong dalam IE9 dengan awalan vendor.

Atas ialah kandungan terperinci Bolehkah Kelas Tolak/Tarik Digunakan untuk Lajur Bootstrap Lebar Sama?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!