Bolehkah Kelas Tekan/Tarik Bootstrap Menyusun Semula Lajur Bersaiz Sama pada Peranti Mudah Alih?

Menyusun Semula Lajur Bootstrap dengan Tekan/Tarik: Had dan Pendekatan Alternatif

Apabila berurusan dengan lajur yang sama saiz (.col-*-12), pertanyaan biasa timbul mengenai kemungkinan menukar pesanan mereka menggunakan arahan tolak dan tarik Bootstrap. Tujuan pertanyaan ini adalah untuk memahami sama ada mungkin untuk membalikkan peletakan dua lajur sedemikian pada peranti dengan saiz skrin mudah alih.

Penghadan Tolak/Tarik

Malangnya, tidak mungkin untuk menyusun semula .col-*-12 lajur menggunakan kelas tolak dan tarik. Ini disebabkan oleh fakta bahawa jumlah lajur ini melebihi saiz grid pratakrif 12 lajur, seperti yang ditentukan oleh pembolehubah @grid-columns dalam Bootstrap.

Pendekatan Alternatif

Untuk mencapai susunan semula yang dikehendaki, pertimbangkan alternatif berikut:

1. Mengubah suai Struktur HTML dan Menggunakan Tekan/Tarik untuk Skrin yang Lebih Besar:

Susun semula lajur dalam HTML dan gunakan kelas tolak/tarik untuk mencapai susunan yang dikehendaki pada 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>

2. Menggunakan CSS Transforms to Reverse Lajur Tertib pada Mudah Alih:

Gunakan CSS berikut untuk membalikkan susunan lajur bertindan menegak pada peranti dengan saiz skrin 767px atau kurang:

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

Perhatikan bahawa pendekatan ini memerlukan penggunaan kelas HTML khusus untuk lajur yang dikehendaki untuk disusun semula.

Atas ialah kandungan terperinci Bolehkah Kelas Tekan/Tarik Bootstrap Menyusun Semula Lajur Bersaiz Sama pada Peranti Mudah Alih?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!