Bagaimana untuk Menyusun Semula .col-*-12 Lajur dalam Bootstrap Menggunakan Tekan/Tarik?

Susan Sarandon
Lepaskan: 2024-11-03 03:02:03
asal
426 orang telah melayarinya

How to Reorder .col-*-12 Columns in Bootstrap Using Push/Pull?

Menyusun Semula Lajur dengan Push/Pull untuk .col-*-12 dalam Bootstrap

Dalam Bootstrap, kelas arahan tolak dan tarik boleh digunakan untuk melaraskan peletakan lajur berbanding lajur sekeliling. Walau bagaimanapun, apabila ia berkaitan dengan lajur dengan lebar 12 (iaitu .col-*-12), adalah penting untuk ambil perhatian bahawa tolak/tarik tidak boleh mengubah susunannya secara langsung.

Ini kerana jumlah lebar daripada dua lajur melebihi lebar grid 12 lajur lalai yang ditentukan oleh Bootstrap. Sebaliknya, terdapat dua pendekatan untuk menyusun semula lajur ini:

1. Songsang Susunan Lajur HTML dan Gunakan Kelas Pesanan pada Skrin Lebih Besar

Dalam pendekatan ini, anda boleh menukar susunan lajur dalam penanda HTML anda dan kemudian menggunakan tolak/tarik untuk menukar susunannya 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>
Salin selepas log masuk

2. Gunakan Transformasi CSS untuk Susunan Semula Menegak

Sebagai alternatif, anda boleh menggunakan transformasi CSS untuk membalikkan susunan lajur apabila ia disusun secara menegak pada skrin yang lebih kecil:

<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>
Salin selepas log masuk

Perhatikan bahawa CSS transformasi disokong dalam IE9 dan lebih tinggi, jadi anda mungkin perlu memasukkan awalan vendor untuk keserasian.

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

sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan