Bagaimana untuk Mencapai Gelagat Tolak/Tarik Lajur Responsif dalam Bootstrap 3?

Menolak dan Menarik Lajur dalam Bootstrap 3

Apabila mereka bentuk reka letak responsif, selalunya perlu menyusun semula atau mengubah suai lajur pada saiz skrin yang lebih kecil. Walaupun Bootstrap 3 menyediakan kelas seperti col-xs-6 untuk melaraskan lebar lajur, ia tidak menawarkan sokongan langsung untuk menolak atau menarik lajur pada titik putus tertentu.

Mencapai Tekan/Tarik Responsif

Untuk mencapai gelagat tolak/tarik yang diingini pada skrin yang lebih kecil, seseorang boleh menggunakan pendekatan berlawanan dengan intuitif: "mudah alih didahulukan." Mulakan dengan menentukan reka letak yang diingini untuk skrin yang lebih kecil dengan kelas col-xs-* pilihan anda, kemudian gunakan kelas col-lg-* dengan col-lg-push-* atau col-lg-pull-* untuk meletakkan lajur pada skrin yang lebih besar.

Sebagai contoh, untuk meniru reka letak yang dinyatakan dalam soalan:

<code class="html"><div class="col-lg-3 col-xs-6">1</div>
<div class="col-lg-3 col-xs-6 col-lg-push-6">5</div>
<div class="col-lg-2 col-xs-4 col-lg-pull-3">2</div>
<div class="col-lg-2 col-xs-4 col-lg-pull-3">3</div>
<div class="col-lg-2 col-xs-4 col-lg-pull-3">4</div></code>

Dengan cara ini, lajur akan muncul dalam susunan yang ditentukan untuk skrin yang lebih kecil, sambil melaraskan kedudukannya pada desktop yang lebih besar melalui col -lg-* kelas. Pada asasnya, pendekatan ini melibatkan pembalikan proses biasa bermula dengan reka letak desktop dan melaraskan untuk mudah alih.

Atas ialah kandungan terperinci Bagaimana untuk Mencapai Gelagat Tolak/Tarik Lajur Responsif dalam Bootstrap 3?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!