Mengapa Lajur Bootstrap XS Saya Membungkus Tanpa Diduga?

Kecelakaan Pembalut Lajur Bootstrap XS

Menghadapi gelagat lajur yang tidak dijangka apabila lebar skrin mengecil kepada saiz ultra-kecil? Jika ya, anda tidak bersendirian. Isu ini timbul dengan kelas lajur XS Bootstrap (kini col-x dalam Bootstrap 4).

Punca:

Isu ini berpunca daripada fakta bahawa sementara lajur XS mempunyai lebar yang ditetapkan, mereka juga mempunyai padding pada kedua-dua belah pihak. Pelapik ini boleh menyebabkan lajur melebihi lebar yang dimaksudkan, membawa kepada gelagat pembalut yang tidak dijangka apabila skrin menjadi terlalu sempit.

Penyelesaian:

Bootstrap tidak mempunyai pada masa ini cara terbina dalam untuk menyelesaikan isu ini, tetapi penyelesaian biasa ialah mengelak daripada menggunakan col-XS-1 (atau col-1 dalam Bootstrap 4) apabila lebar skrin kurang daripada 360px.

Sebagai alternatif, anda boleh mempertimbangkan untuk menggunakan CSS untuk menetapkan lebar minimum untuk bekas, memastikan lajur mempunyai ruang yang mencukupi untuk dipaparkan dengan betul walaupun pada skrin yang sangat kecil.

Nota Tambahan:

Dalam Bootstrap 4, kelas col-XS-1 telah dinamakan semula kepada col-1. Walau bagaimanapun, isu ini berterusan untuk kelas ini juga.

Atas ialah kandungan terperinci Mengapa Lajur Bootstrap XS Saya Membungkus Tanpa Diduga?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!