รางน้ำ

รางน้ำเป็นส่วนเสริมระหว่างคอลัมน์ของคุณ ซึ่งใช้ในการจัดพื้นที่และจัดแนวเนื้อหาในระบบกริด Bootstrap

ในหน้านี้

ทำงานอย่างไร

รางน้ำคือช่องว่างระหว่างเนื้อหาคอลัมน์ที่สร้างโดยแนวpaddingนอน เราตั้งค่าpadding-rightและpadding-leftในแต่ละคอลัมน์ และใช้ค่าลบmarginเพื่อชดเชยที่จุดเริ่มต้นและจุดสิ้นสุดของแต่ละแถวเพื่อจัดแนวเนื้อหา
รางน้ำเริ่มต้นที่1.5rem( 24px) กว้าง ซึ่งช่วยให้เราสามารถจับคู่กริดของเรากับขนาดช่องว่างภายในและตัวเว้นระยะระยะขอบ
สามารถปรับรางน้ำได้ตามต้องการ ใช้คลาสรางน้ำเฉพาะจุดพักเพื่อปรับเปลี่ยนรางน้ำแนวนอน รางน้ำแนวตั้ง และรางน้ำทั้งหมด

รางน้ำแนวนอน

.gx-*สามารถใช้คลาสเพื่อควบคุมความกว้างของรางน้ำแนวนอนได้ อาจจำเป็นต้องปรับพาเร น ต์ .containerหรือ พาเรน .container-fluidต์หากใช้รางน้ำขนาดใหญ่เพื่อหลีกเลี่ยงน้ำล้นที่ไม่ต้องการโดยใช้ยูทิลิตี้ช่องว่างภายในที่ตรงกัน ตัวอย่างเช่น ในตัวอย่างต่อไปนี้ เราได้เพิ่มช่องว่างภายในด้วย.px-4:

ช่องว่างภายในคอลัมน์ที่กำหนดเอง

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

อีกทางเลือกหนึ่งคือการเพิ่ม wrapper รอบ ๆ.rowกับ.overflow-hiddenคลาส:

ช่องว่างภายในคอลัมน์ที่กำหนดเอง

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

รางน้ำแนวตั้ง

.gy-*สามารถใช้คลาสเพื่อควบคุมความกว้างของรางน้ำแนวตั้งได้ เช่นเดียวกับรางน้ำแนวนอน รางน้ำแนวตั้งอาจทำให้บางส่วนล้นด้านล่าง.rowที่ส่วนท้ายของหน้า หากเกิดเหตุการณ์นี้ คุณเพิ่ม wrapper รอบ ๆ.rowกับ.overflow-hiddenคลาส:

ช่องว่างภายในคอลัมน์ที่กำหนดเอง

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

รางน้ำแนวนอนและแนวตั้ง

.g-*สามารถใช้คลาสเพื่อควบคุมความกว้างของรางน้ำแนวนอนได้ สำหรับตัวอย่างต่อไปนี้ เราใช้ความกว้างของรางน้ำที่เล็กกว่า ดังนั้นจึงไม่จำเป็นต้องเพิ่ม.overflow-hiddenคลาสของตัวห่อหุ้ม

ช่องว่างภายในคอลัมน์ที่กำหนดเอง

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

รางน้ำคอลัมน์แถว

คลาสรางน้ำสามารถเพิ่มลงในคอลัมน์แถวได้ ในตัวอย่างต่อไปนี้ เราใช้คอลัมน์แถวที่ตอบสนองและคลาสรางน้ำที่ตอบสนอง

คอลัมน์แถว

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

ไม่มีรางน้ำ

รางน้ำระหว่างคอลัมน์ในคลาสกริดที่กำหนดไว้ล่วงหน้าของเราสามารถลบออกได้ด้วย.g-0. สิ่งนี้จะลบค่าลบmarginออกจาก.rowและแนวนอนpaddingออกจากคอลัมน์ลูกที่อยู่ติดกันทั้งหมด

ต้องการการออกแบบที่ล้ำสมัยหรือไม่? วางผู้ปกครอง.containerหรือ.container-fluid.

ในทางปฏิบัติมีลักษณะดังนี้ โปรดทราบว่าคุณสามารถใช้สิ่งนี้กับคลาสกริดที่กำหนดไว้ล่วงหน้าอื่นๆ ทั้งหมดได้ (รวมถึงความกว้างของคอลัมน์ ระดับที่ตอบสนอง การเรียงลำดับใหม่ และอื่นๆ)

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

เปลี่ยนรางน้ำ

คลาสถูกสร้างขึ้นจาก$guttersแผนที่ Sass ซึ่งสืบทอดมาจาก$spacersแผนที่ Sass

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