รางน้ำ

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

ในหน้านี้

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

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

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

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

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

html

<div class="container px-4 text-center">
  <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คลาส:

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

html

<div class="container overflow-hidden text-center">
  <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คลาส:

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

html

<div class="container overflow-hidden text-center">
  <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คลาสของตัวห่อหุ้ม

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

html

<div class="container text-center">
  <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>

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

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

คอลัมน์แถว

html

<div class="container text-center">
  <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>

ไม่มีรางน้ำ

The gutters between columns in our predefined grid classes can be removed with .g-0. This removes the negative margins from .row and the horizontal padding from all immediate children columns.

Need an edge-to-edge design? Drop the parent .container or .container-fluid and add .mx-0 to the .row to prevent overflow.

In practice, here’s how it looks. Note you can continue to use this with all other predefined grid classes (including column widths, responsive tiers, reorders, and more).

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

.col-6 .col-md-4

html

<div class="row g-0 text-center">
  <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>

Change the gutters

Classes are built from the $gutters Sass map which is inherited from the $spacers Sass map.

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