Rumah > Artikel > hujung hadapan web > Mengapa Lajur Bootstrap Tidak Dibalut Dengan Betul pada Saiz XS?

Mengapa Lajur Bootstrap Tidak Dibalut Dengan Betul pada Saiz XS?

Linda Hamiltonasal: 2024-10-31 04:45:30954semak imbas

Why Do Bootstrap Columns Not Wrap Correctly at XS Size?

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!

bootstrap less if for using class this padding column github https issue

Kenyataan：

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 sebelumnya：Bagaimana untuk Mencapai Susunan Lajur Responsif dalam Bootstrap 3 Menggunakan Kelas Tolak dan Tarik?Artikel seterusnya：Bagaimana untuk Mencapai Susunan Lajur Responsif dalam Bootstrap 3 Menggunakan Kelas Tolak dan Tarik?

Artikel berkaitan

Lihat lagi