Mengapa Lajur Bootstrap XS Saya Balut dengan Tidak Betul pada Saiz Skrin Terlalu Kecil?

Membetulkan Isu Bungkus Lajur Bootstrap XS

Sistem grid Bootstrap boleh menghadapi masalah di mana lajur bersaiz XS terakhir dibalut dengan tidak betul apabila lebar skrin menjadi sangat kecil. Walaupun mengkonfigurasi lajur untuk menambah sehingga 12, tingkah laku penjajaran mungkin tidak mematuhi jangkaan.

Sebagai contoh, pertimbangkan kod berikut:

<code class="html"><div class="container">
    <div class="row">
        <div class="col-xs-2"></div>
        <div class="col-xs-1 col-xs-offset-8"></div>
        <div class="col-xs-1"></div>
    </div>
</div></code>

Biasanya, apabila saiz skrin dikecilkan, lajur terakhir hendaklah disusun secara menegak di hujung skrin. Walau bagaimanapun, apabila skrin berkurangan melepasi ambang kritikal, lajur tiba-tiba membungkus ke arah permulaan.

Sesetengah pengguna telah mempertimbangkan untuk menambah kod CSS untuk menentukan lebar minimum bagi bekas. Walau bagaimanapun, penyelesaian alternatif wujud dalam Bootstrap.

Penjelasan Isu

Tingkah laku ini berpunca daripada isu yang diketahui, didokumenkan dalam GitHub (https://github.com/twbs /bootstrap/issues/13221). Pada lebar skrin yang lebih sempit daripada 360px, lajur .col-xs-1 mula dibalut kerana lebar lajur ditetapkan kepada 8.333333%, manakala padding pada kedua-dua sisi berjumlah 15px. Asimetri ini menyebabkan percanggahan, menyebabkan penyemak imbas menyusun lajur.

Mengelakkan Masalah

Untuk mengelakkan pembalut, elakkan daripada menggunakan .col-xs-1 pada skrin yang sangat kecil. Selain itu, nilaikan sama ada skrin mungkin diubah saiz secara realistik di bawah 360px. Dalam kebanyakan senario, ini bukan kejadian yang kerap.

Nota: Dalam Bootstrap 4, .col-xs-1 telah digantikan dengan .col-1.

Isu Berkaitan:

• [Grid Bootstrap pecah dalam saiz terkecil](https://stackoverflow.com/questions/21023320/twitter-bootstrap-3-grid-breaks-in -saiz terkecil)

Atas ialah kandungan terperinci Mengapa Lajur Bootstrap XS Saya Balut dengan Tidak Betul pada Saiz Skrin Terlalu Kecil?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!