Bagaimana untuk Menghalang Lajur daripada Bertindan Apabila Menggunakan Pembalut Tetap dengan Sistem Grid Bootstrap?

Sistem grid Bootstrap digabungkan dengan pembalut tetap - menghalang susunan lajur

Masalah:

Menggunakan sistem grid Bootstrap 3 digabungkan Apabila pembungkus dibetulkan, lajur bertindan bersama apabila tetingkap penyemak imbas menukar saiz, walaupun pembungkus kekal saiz yang sama.

Jawapan:

Lajur seperti sm, md, lg dalam Bootstrap akan membalut/bertindan secara responsif. Untuk menggunakan lajur tidak bertindan, anda boleh menggunakan kelas col-xs-*.

<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: Dalam Bootstrap 4, tidak perlu lagi nyatakan xs .

<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 Menghalang Lajur daripada Bertindan Apabila Menggunakan Pembalut Tetap dengan Sistem Grid Bootstrap?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!