Bolehkah Anda Menyusun Semula Lajur Bootstrap dengan .col-*-12 Menggunakan Tekan dan Tarik?

Menyusun Semula Lajur Bootstrap dengan .col-*-12 Menggunakan Tekan dan Tarik

Dalam bidang reka letak grid Bootstrap, anda mungkin menghadapi keadaan di mana anda perlu menukar susunan lajur dengan kelas .col-xs-12 pada skrin yang lebih kecil (peranti mudah alih). Adalah penting untuk memahami bahawa arahan tolak dan tarik tradisional mungkin tidak menawarkan penyelesaian langsung dalam senario ini.

Bolehkah Anda Menyusun Semula Lajur dengan .col-*-12 Menggunakan Tekan/Tarik?

Tidak, anda tidak boleh menyusun semula .col--12 lajur menggunakan .col--push-12 dan .col-*-pull-12 kelas. Ini kerana gabungan lebar lajur ini melebihi grid 12 lajur yang ditentukan.

Pendekatan Alternatif untuk Menyusun Semula .col-*-12 Lajur:

• Susun Semula Lajur dalam HTML: Anda boleh mengubah susunan lajur dalam Penanda HTML dan gunakan kelas pesanan pada saiz skrin yang lebih besar. Contohnya:

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

• Tertib Lajur Menegak Songsang dengan Transformasi CSS: Kaedah ini melibatkan penggunaan transformasi CSS untuk memutarkan tertib lajur pada skrin yang lebih kecil.

<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 disokong dalam IE9 dan ke atas, tetapi ingat untuk memasukkan awalan vendor untuk keserasian merentas penyemak imbas.

Atas ialah kandungan terperinci Bolehkah Anda Menyusun Semula Lajur Bootstrap dengan .col-*-12 Menggunakan Tekan dan Tarik?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!