Bagaimana untuk Mencegah Lajur Grid Bootstrap daripada Bertindan dengan Pembalut Tetap?

Gunakan Kelas Lajur Tidak Bersusun untuk Grid Bootstrap dengan Pembalut Tetap

Apabila menggunakan sistem grid Bootstrap dengan pembalut tetap, adalah mungkin untuk menghalang lajur daripada disusun secara menegak apabila penyemak imbas diubah saiznya.

Untuk mencapai matlamat ini, gunakan kelas bukan tindanan col-xs-* yang direka khusus untuk skrin kecil. Kelas ini mengatasi gelagat responsif lalai dan memastikan lajur kekal bersebelahan dalam pembalut tetap.

<code class="html"><div class="container">
  <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>

Demo: http://bootply.com/80085

Nota untuk Bootstrap 4:

Dalam Bootstrap 4, awalan xs tidak lagi diperlukan untuk lajur tidak bertindan. Hanya gunakan kelas col-* untuk mencapai kesan yang diingini.

<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>

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