longkang

Longkang ialah pelapik di antara lajur anda, digunakan untuk mengosongkan dan menjajarkan kandungan secara responsif dalam sistem grid Bootstrap.

Pada halaman ini

Bagaimana mereka bekerja

Longkang ialah jurang antara kandungan lajur, dicipta oleh mendatar padding. Kami menetapkan padding-rightdan padding-leftpada setiap lajur, dan menggunakan negatif marginuntuk mengimbanginya pada permulaan dan akhir setiap baris untuk menjajarkan kandungan.
Longkang bermula pada 1.5rem( 24px) lebar. Ini membolehkan kami memadankan grid kami dengan skala pelapik dan pengatur jarak jidar .
Parit boleh dilaraskan secara responsif. Gunakan kelas longkang khusus titik putus untuk mengubah suai longkang mendatar, longkang menegak dan semua longkang.

Parit mendatar

.gx-*kelas boleh digunakan untuk mengawal lebar longkang mendatar. Induk .containeratau .container-fluidinduk mungkin perlu dilaraskan jika longkang yang lebih besar digunakan juga untuk mengelakkan limpahan yang tidak diingini, menggunakan utiliti pelapik yang sepadan. Sebagai contoh, dalam contoh berikut kami telah meningkatkan padding dengan .px-4:

Pelapik lajur tersuai

<div class="container px-4">
  <div class="row gx-5">
    <div class="col">
     <div class="p-3 border bg-light">Custom column padding</div>
    </div>
    <div class="col">
      <div class="p-3 border bg-light">Custom column padding</div>
    </div>
  </div>
</div>

Penyelesaian alternatif ialah menambah pembalut di sekeliling .rowdengan .overflow-hiddenkelas:

Pelapik lajur tersuai

<div class="container overflow-hidden">
  <div class="row gx-5">
    <div class="col">
     <div class="p-3 border bg-light">Custom column padding</div>
    </div>
    <div class="col">
      <div class="p-3 border bg-light">Custom column padding</div>
    </div>
  </div>
</div>

Longkang menegak

.gy-*kelas boleh digunakan untuk mengawal lebar longkang menegak. Seperti longkang mendatar, longkang menegak boleh menyebabkan sedikit limpahan di bawah .rowpada penghujung halaman. Jika ini berlaku, anda menambah pembalut .rowdengan .overflow-hiddenkelas:

Pelapik lajur tersuai

<div class="container overflow-hidden">
  <div class="row gy-5">
    <div class="col-6">
      <div class="p-3 border bg-light">Custom column padding</div>
    </div>
    <div class="col-6">
      <div class="p-3 border bg-light">Custom column padding</div>
    </div>
    <div class="col-6">
      <div class="p-3 border bg-light">Custom column padding</div>
    </div>
    <div class="col-6">
      <div class="p-3 border bg-light">Custom column padding</div>
    </div>
  </div>
</div>

Longkang mendatar & menegak

.g-*kelas boleh digunakan untuk mengawal lebar longkang mendatar, untuk contoh berikut kita menggunakan lebar longkang yang lebih kecil, jadi tidak perlu menambah .overflow-hiddenkelas pembalut.

Pelapik lajur tersuai

<div class="container">
  <div class="row g-2">
    <div class="col-6">
      <div class="p-3 border bg-light">Custom column padding</div>
    </div>
    <div class="col-6">
      <div class="p-3 border bg-light">Custom column padding</div>
    </div>
    <div class="col-6">
      <div class="p-3 border bg-light">Custom column padding</div>
    </div>
    <div class="col-6">
      <div class="p-3 border bg-light">Custom column padding</div>
    </div>
  </div>
</div>

Lajur baris longkang

Kelas longkang juga boleh ditambah pada lajur baris . Dalam contoh berikut, kami menggunakan lajur baris responsif dan kelas longkang responsif.

Lajur baris

<div class="container">
  <div class="row row-cols-2 row-cols-lg-5 g-2 g-lg-3">
    <div class="col">
      <div class="p-3 border bg-light">Row column</div>
    </div>
    <div class="col">
      <div class="p-3 border bg-light">Row column</div>
    </div>
    <div class="col">
      <div class="p-3 border bg-light">Row column</div>
    </div>
    <div class="col">
      <div class="p-3 border bg-light">Row column</div>
    </div>
    <div class="col">
      <div class="p-3 border bg-light">Row column</div>
    </div>
    <div class="col">
      <div class="p-3 border bg-light">Row column</div>
    </div>
    <div class="col">
      <div class="p-3 border bg-light">Row column</div>
    </div>
    <div class="col">
      <div class="p-3 border bg-light">Row column</div>
    </div>
    <div class="col">
      <div class="p-3 border bg-light">Row column</div>
    </div>
    <div class="col">
      <div class="p-3 border bg-light">Row column</div>
    </div>
  </div>
</div>

Tiada longkang

Parit antara lajur dalam kelas grid kami yang telah ditetapkan boleh dialihkan dengan .g-0. Ini mengalih keluar s negatif margindaripada .rowdan mendatar paddingdaripada semua lajur kanak-kanak segera.

Perlukan reka bentuk tepi ke tepi? Gugurkan ibu bapa .containeratau .container-fluid.

Dalam amalan, inilah rupanya. Harap maklum bahawa anda boleh terus menggunakan ini dengan semua kelas grid pratakrif lain (termasuk lebar lajur, peringkat responsif, susunan semula dan banyak lagi).

.col-sm-6 .col-md-8

.col-6 .col-md-4

<div class="row g-0">
  <div class="col-sm-6 col-md-8">.col-sm-6 .col-md-8</div>
  <div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>

Tukar longkang

Kelas dibina daripada $gutterspeta Sass yang diwarisi daripada $spacerspeta Sass.

$grid-gutter-width: 1.5rem;
$gutters: (
  0: 0,
  1: $spacer * .25,
  2: $spacer * .5,
  3: $spacer,
  4: $spacer * 1.5,
  5: $spacer * 3,
);