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

Cara Mencegah Penimbunan dalam Grid Bootstrap dengan Pembalut Tetap

Dalam Bootstrap, sistem grid membenarkan lajur disusun secara responsif mengikut lebar viewport . Walau bagaimanapun, tingkah laku ini boleh menjadi tidak diingini dalam senario tertentu, seperti apabila menggunakan bekas lebar tetap.

Untuk mengelakkan lajur daripada disusun dalam bekas lebar tetap, adalah perlu untuk menggunakan kelas bukan tindanan.

Menggunakan col-xs-* untuk Bootstrap 3

Dalam Bootstrap 3, kelas col-xs-* harus digunakan untuk menentukan lajur yang tidak akan disusun. Titik putus xs (lebih kecil) mewakili saiz skrin terkecil dan digunakan untuk mengawal tingkah laku pada resolusi paling melampau.

Contohnya:

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

Menggunakan col-* untuk Bootstrap 4

Dalam Bootstrap 4, kelas col-xs-* tidak lagi diperlukan. Sebaliknya, kelas col-* tanpa awalan titik putus boleh digunakan terus untuk mentakrifkan lajur bukan tindanan:

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

Pelaksanaan

Dengan memasukkan bukan- menyusun kelas ke dalam sistem grid, anda boleh menghalang lajur daripada disusun dengan berkesan apabila tetingkap penyemak imbas diubah saiz, memastikan reka letak kekal utuh dalam bekas lebar tetap.

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