Bagaimana untuk Mencegah Lajur Grid Bootstrap daripada Bertindan dalam Bekas Lebar Tetap?

Sistem Grid Bootstrap: Mengatasi Susun Lajur dengan Pembalut Tetap

Sistem grid Bootstrap ialah komponen asas dalam reka bentuk web untuk mencipta reka letak responsif. Walau bagaimanapun, apabila menggunakan bekas lebar tetap, lajur dalam grid boleh disusun secara menegak pada saiz penyemak imbas yang lebih kecil.

Isu:

Apabila menggunakan pembalut lebar tetap dalam Bootstrap 3, lajur grid akan runtuh dan bertindan di atas satu sama lain apabila tetingkap penyemak imbas diubah saiz, walaupun jika pembungkus itu sendiri kekal saiz yang sama.

Penyelesaian: Menggunakan Kelas Tidak Bersusun

Untuk mengelakkan lajur daripada disusun dalam bekas lebar tetap, Bootstrap menyediakan satu set kelas "bukan tindanan". Kelas ini menggunakan pertanyaan media untuk mengatasi gelagat susun lalai pada resolusi skrin tertentu.

Dalam Bootstrap 3, kelas bukan tindanan diawali dengan col-xs-. Kelas ini boleh digunakan pada lajur untuk mengelakkannya daripada runtuh pada saiz skrin yang lebih kecil.

Contoh:

<code class="html"><div class="container-fixed">
  <div class="row">
    <div class="col-xs-4">.col-4</div>
    <div class="col-xs-4">.col-4</div>
    <div class="col-xs-4">.col-4</div>
  </div>
</div></code>

Dalam contoh ini, lajur akan kekal bersebelahan- bersebelahan walaupun pada saiz skrin yang paling kecil.

Kemas Kini Bootstrap 4:

Dalam Bootstrap 4, konsep kelas bukan tindanan telah dipermudahkan. Awalan xs tidak diperlukan lagi. Sebaliknya, tingkah laku lalai adalah untuk menghalang susunan lajur. Untuk memastikan lajur kekal bersebelahan, hanya gunakan kelas kol standard (cth., kol-4).

Atas ialah kandungan terperinci Bagaimana untuk Mencegah Lajur Grid Bootstrap daripada Bertindan dalam Bekas Lebar Tetap?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!