Bagaimana Saya Mengalih Keluar Parit dalam Bootstrap Merentasi Versi Berbeza?

Mengalih Keluar Parit dalam Bootstrap

Dalam Bootstrap, lajur dipisahkan oleh longkang 30px, tetapi terdapat keadaan di mana mengalihkannya diperlukan. Artikel ini menyelidiki penyelesaian untuk membuang longkang tanpa menggunakan pendekatan margin-kiri:-30px.

Bootstrap 5 (Terbaru)

Bootstrap 5 memperkenalkan penyelesaian yang dipermudahkan dengan kelas .no-gutters. Menambah kelas ini pada .row akan menghapuskan jarak antara lajur:

<div class="row no-gutters">
  <div class="col">x</div>
  <div class="col">x</div>
  <div class="col">x</div>
</div>

Bootstrap 4

Bootstrap 4 turut menambah .no-gutters kelas, serupa dengan Bootstrap 5:

<div class="row no-gutters">
  <div class="col">x</div>
  <div class="col">x</div>
  <div class="col">x</div>
</div>

Bootstrap 4 juga termasuk kelas longkang responsif, memberikan lebih fleksibiliti:

<!-- Remove gutters on small and above breakpoints -->
<div class="row g-0 g-sm-3">
  <div class="col">x</div>
  <div class="col">x</div>
  <div class="col">x</div>
</div>

Bootstrap 3.4.0

Untuk Bootstrap versi 3.4.0 dan lebih baru, khusus Kelas .row-no-gutters boleh digunakan:

<div class="row row-no-gutters">
  <div class="col">x</div>
  <div class="col">x</div>
  <div class="col">x</div>
</div>

Bootstrap 3 (<= 3.3.9)

Dalam sebelumnya Versi Bootstrap (3 hingga 3.3.9), mengalih keluar talang memerlukan pelarasan kedua-dua jidar dan padding:

/* .row */
.no-gutter {
  margin-right: 0;
  margin-left: 0;
}

/* .row > [class*="col-"] */
.no-gutter > [class*="col-"] {
  padding-right: 0;
  padding-left: 0;
}<p>Tambahkan kelas <strong>.no-gutter</strong> ke <strong>.row</strong> dan anda sudah bersedia:</p>
<pre class="brush:php;toolbar:false"><div class="row no-gutter">
  <div class="col">x</div>
  <div class="col">x</div>
  <div class="col">x</div>
</div>

Memanfaatkan teknik ini, anda boleh menghapuskan longkang dengan mudah dalam Bootstrap dan mencapai reka letak visual yang diingini.

Atas ialah kandungan terperinci Bagaimana Saya Mengalih Keluar Parit dalam Bootstrap Merentasi Versi Berbeza?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!