Mengapa Lajur Bootstrap Tidak Dibalut Dengan Betul pada Saiz XS?

Pembungkusan Lajur Bootstrap dalam Saiz Terkecil (XS)

Bootstrap, rangka kerja bahagian hadapan yang popular, menyediakan sistem grid responsif yang membolehkan pembangun mencipta reka letak fleksibel yang menyesuaikan dengan saiz skrin yang berbeza. Walau bagaimanapun, isu biasa yang dihadapi apabila menggunakan titik putus saiz terkecil (XS) ialah lajur tidak membalut seperti yang dijangkakan apabila lebar skrin berkurangan melebihi had tertentu.

Isu ini berlaku kerana lajur dengan lebar gabungan 12 (cth.,

< div class="col-xs-1">

) mungkin tidak membalut dengan betul kerana pelapik minimum pada setiap lajur. Lajur .col-xs-1 Bootstrap mempunyai pelapik 15px, yang boleh menyebabkan lajur itu membalut lebih awal pada skrin sempit.

Isu Diketahui:

Isu ini diakui dalam repositori Bootstrap GitHub: https://github.com/twbs/bootstrap/issues/13221.

Penyelesaian:

Untuk mengelakkan isu ini, pertimbangkan perkara berikut cadangan:

• Jangan gunakan lajur .col-xs-1 pada skrin yang sangat kecil: Sebaliknya, gunakan lajur yang lebih besar seperti .col-xs-2 atau .col-xs -3.
• Pertimbangkan saiz skrin: Tentukan sama ada skrin akan diubah saiznya secara realistik di bawah 360px. Dalam kebanyakan kes, ini tidak mungkin.

Nota untuk Bootstrap 4:

Dalam Bootstrap 4, .col-xs-1 telah dinamakan semula kepada . col-1. Isu yang sama mungkin berlaku dengan lajur .col-1 pada skrin kurang daripada 360px lebar.

Isu Berkaitan:

Pengguna Bootstrap juga telah melaporkan isu yang sama dengan grid pecah pada saiz terkecil: https://stackoverflow.com/questions/29385993/bootstrap-grid-breaks-in-smallest-size

Atas ialah kandungan terperinci Mengapa Lajur Bootstrap Tidak Dibalut Dengan Betul pada Saiz XS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!