Rumah  >  Artikel  >  hujung hadapan web  >  Bagaimana untuk Menghalang Lajur Grid Bootstrap daripada Bertindan dalam Pembalut Lebar Tetap?

Bagaimana untuk Menghalang Lajur Grid Bootstrap daripada Bertindan dalam Pembalut Lebar Tetap?

DDD
DDDasal
2024-11-02 16:19:03750semak imbas

How to Prevent Bootstrap Grid Columns from Stacking in a Fixed-Width Wrapper?

Sistem Grid Bootstrap dengan Pembalut Lebar Tetap: Menghalang Susun Lajur

Apabila menggunakan sistem grid Bootstrap 3 dalam pembalut lebar tetap, lajur cenderung untuk disusun secara menegak apabila saiz port pandangan penyemak imbas berubah. Untuk menyelesaikan tingkah laku ini, gunakan kelas col-xs-* untuk menjadikan lajur sebagai elemen tidak bertindan:

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

Kod ini memastikan lajur kekal bersebelahan tanpa mengira perubahan saiz penyemak imbas. Ambil perhatian bahawa untuk Bootstrap 4, kelas col-xs-* tidak lagi diperlukan:

<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 Grid Bootstrap daripada Bertindan dalam Pembalut Lebar Tetap?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

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