Mengapa Lajur Bootstrap xs Saya Membungkus Daripada Menyusun Di Bawah 360px?

Bootstrap: xs Lajur Tanpa Jangka Membungkus

Rangka kerja Bootstrap memudahkan reka bentuk responsif dengan menyediakan utiliti untuk mencipta reka letak yang fleksibel dan cekap. Walau bagaimanapun, pengguna kadangkala menghadapi isu yang tidak dijangka apabila lajur tidak berkelakuan seperti yang dijangkakan, terutamanya dalam saiz yang lebih kecil (xs).

Isu: Pembalut Lajur xs Daripada Bertindan

Biasanya, apabila satu baris lajur menambah sehingga 12, ia harus disusun secara menegak apabila lebar skrin berkurangan. Walau bagaimanapun, pada skrin yang lebih kecil, lajur mungkin secara tidak dijangka membungkus ke arah permulaan skrin dan bukannya ke penghujung.

Punca: Penyemak Imbas Tidak Padan

Tingkah laku ini timbul disebabkan oleh isu yang diketahui dalam Bootstrap. Dalam lebar skrin kurang daripada 360px, lajur dengan lebar 1% (col-xs-1) mungkin tidak muat dengan betul dalam bekas. Walaupun menentukan lebar 1%, padding 15px pada kedua-dua belah secara berkesan menjadikan lajur lebih lebar, menyebabkan ketidakpadanan dengan enjin reka letak penyemak imbas.

Penyelesaian: Elakkan col-xs-1 untuk Skrin Kecil

Untuk mengelakkan isu ini, pertimbangkan untuk tidak menggunakan col-xs-1 pada skrin yang lebih kecil daripada 360px. Tentukan sama ada aplikasi anda secara realistik menjangka pengguna mengubah saiz skrin di bawah had ini.

Nota untuk Bootstrap 4

Dalam Bootstrap 4, kelas col-xs-1 telah dinamakan semula kepada col-1. Isu yang diterangkan di atas masih terpakai pada col-1 dalam Bootstrap 4.

Atas ialah kandungan terperinci Mengapa Lajur Bootstrap xs Saya Membungkus Daripada Menyusun Di Bawah 360px?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!