masyarakat Belajar Perpustakaan Alatan Masa lapang

Melayu

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

Mengapa Lajur Bootstrap Tidak Dibalut Dengan Betul pada Saiz XS?

Linda Hamilton

Lepaskan： 2024-10-31 04:45:30

asal

1084 orang telah melayarinya

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!

sumber：php.cn

Artikel sebelumnya：Bagaimana untuk Mencapai Susunan Lajur Responsif dalam Bootstrap 3 Menggunakan Kelas Tolak dan Tarik? Artikel seterusnya：Bolehkah Anda Menyesuaikan Penampilan API ReCaptcha V2 Google?

Kenyataan Laman Web ini

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 terbaru oleh pengarang

Isu terkini

function_exists() tidak boleh menentukan fungsi tersuai Ujian fungsi () {return true;} jika (function_exists ('test')) {echo "test is functio...

daripada 2024-04-29 11:01:01

2166

Bagaimana untuk memaparkan versi mudah alih Google Chrome Hello cikgu, bagaimana saya boleh menukar Google Chrome kepada versi mudah alih?

daripada 2024-04-23 00:22:19

2315

Tetingkap anak mengendalikan tetingkap induk, tetapi output tidak bertindak balas. Dua ayat pertama boleh dilaksanakan, tetapi ayat terakhir tidak boleh dilaksanakan.

daripada 2024-04-19 15:37:47

1950

Tiada output dalam tetingkap induk document.onclick = function(){ window.opener.document.write('Saya adalah output tetingkap ...