Source

ระบบกริด

ใช้ตาราง flexbox สำหรับอุปกรณ์พกพาที่มีประสิทธิภาพของเราเพื่อสร้างเลย์เอาต์ของรูปร่างและขนาดทั้งหมด ด้วยระบบสิบสองคอลัมน์ ระดับการตอบสนองเริ่มต้นห้าระดับ ตัวแปร Sass และมิกซ์อิน และคลาสที่กำหนดไว้ล่วงหน้าหลายสิบคลาส

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

ระบบกริดของ Bootstrap ใช้ชุดคอนเทนเนอร์ แถว และคอลัมน์เพื่อจัดวางและจัดแนวเนื้อหา สร้างขึ้นด้วยflexboxและตอบสนองได้อย่างเต็มที่ ด้านล่างนี้คือตัวอย่างและข้อมูลเชิงลึกว่ากริดมารวมกันได้อย่างไร

ใหม่หรือไม่คุ้นเคยกับ flexbox? อ่านคู่มือ CSS Tricks flexboxสำหรับพื้นหลัง คำศัพท์ แนวทางปฏิบัติ และข้อมูลโค้ด

หนึ่งในสามคอลัมน์

<div class="container">
  <div class="row">
    <div class="col-sm">
      One of three columns
    </div>
    <div class="col-sm">
      One of three columns
    </div>
    <div class="col-sm">
      One of three columns
    </div>
  </div>
</div>

ตัวอย่างข้างต้นสร้างคอลัมน์ที่มีความกว้างเท่ากันสามคอลัมน์บนอุปกรณ์ขนาดเล็ก กลาง ใหญ่ และใหญ่พิเศษโดยใช้คลาสกริดที่กำหนดไว้ล่วงหน้าของเรา คอลัมน์เหล่านั้นจะอยู่กึ่งกลางหน้ากับพา.containerเรนต์

แบ่งตามลักษณะการทำงาน:

คอนเทนเนอร์ช่วยจัดวางเนื้อหาไซต์ของคุณให้อยู่ตรงกลางและแนวนอน ใช้.containerสำหรับความกว้างของพิกเซลที่ตอบสนองหรือ.container-fluidสำหรับwidth: 100%วิวพอร์ตและอุปกรณ์ทุกขนาด
แถวเป็นตัวตัดสำหรับคอลัมน์ แต่ละคอลัมน์มีแนวนอนpadding(เรียกว่ารางน้ำ) สำหรับควบคุมช่องว่างระหว่างกัน สิ่งนี้paddingจะถูกตอบโต้ในแถวที่มีระยะขอบติดลบ ด้วยวิธีนี้ เนื้อหาทั้งหมดในคอลัมน์ของคุณจะถูกจัดชิดด้านซ้ายด้วยสายตา
ในเลย์เอาต์กริด เนื้อหาต้องอยู่ในคอลัมน์และเฉพาะคอลัมน์เท่านั้นที่อาจเป็นรายการย่อยของแถว
ต้องขอบคุณ flexbox คอลัมน์กริดที่ไม่มีการระบุwidthจะจัดวางเป็นคอลัมน์ที่มีความกว้างเท่ากันโดยอัตโนมัติ ตัวอย่างเช่น สี่อินสแตนซ์ของ.col-smwill แต่ละรายการจะมีความกว้างโดยอัตโนมัติ 25% จากเบรกพอยต์ขนาดเล็กขึ้นไป ดู ส่วน คอลัมน์เค้าโครงอัตโนมัติสำหรับตัวอย่างเพิ่มเติม
คลาสคอลัมน์ระบุจำนวนคอลัมน์ที่คุณต้องการใช้จากจำนวนที่เป็นไปได้ 12 คอลัมน์ต่อแถว ดังนั้น ถ้าคุณต้องการคอลัมน์ที่มีความกว้างเท่ากันสามคอลัมน์ คุณสามารถใช้.col-4.
คอลัมน์widthถูกกำหนดเป็นเปอร์เซ็นต์ ดังนั้นจึงเป็นแบบไหลและขนาดสัมพันธ์กับองค์ประกอบหลักเสมอ
คอลัมน์มีแนวนอนpaddingเพื่อสร้างรางน้ำระหว่างแต่ละคอลัมน์ อย่างไรก็ตาม คุณสามารถลบออกmarginจากแถวและpaddingออกจากคอลัมน์ด้วย.no-guttersบน.row
ในการทำให้กริดตอบสนองได้ มีเบรกพอยต์กริดห้าจุด หนึ่ง จุดต่อเบรกพอยต์ที่ ตอบสนองแต่ละจุด : เบรกพอยต์ทั้งหมด (เล็กพิเศษ) เล็ก กลาง ใหญ่ และใหญ่พิเศษ
เบรกพอยต์ของกริดอ้างอิงจากการสืบค้นสื่อความกว้างขั้นต่ำ ซึ่งหมายความว่าจะใช้กับเบรกพอยต์นั้นและทั้งหมดที่อยู่ด้านบนนั้น (เช่น.col-sm-4ใช้กับอุปกรณ์ขนาดเล็ก กลาง ใหญ่ และขนาดใหญ่พิเศษ แต่ไม่ใช่xsเบรกพอยต์แรก)
คุณสามารถใช้คลาสกริดที่กำหนดไว้ล่วงหน้า (เช่น.col-4) หรือมิกซ์อิน Sassสำหรับมาร์กอัปเชิงความหมายเพิ่มเติม

ระวังข้อจำกัดและข้อบกพร่องของ flexboxเช่น การไม่สามารถใช้องค์ประกอบ HTML บางอย่างเป็นคอนเทนเนอร์แบบยืดหยุ่นได้

ตัวเลือกกริด

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

ดูว่าแง่มุมต่างๆ ของระบบกริด Bootstrap ทำงานอย่างไรในอุปกรณ์หลายเครื่องด้วยตารางที่ใช้งานสะดวก

	เล็กพิเศษ <576px	เล็ก ≥576px	กลาง ≥768px	ใหญ่ ≥992px	ขนาดใหญ่พิเศษ ≥1200px
ความกว้างคอนเทนเนอร์สูงสุด	ไม่มี (อัตโนมัติ)	540px	720px	960px	1140px
คำนำหน้าชั้นเรียน	`.col-`	`.col-sm-`	`.col-md-`	`.col-lg-`	`.col-xl-`
# ของคอลัมน์	12
ความกว้างของรางน้ำ	30px (15px ในแต่ละด้านของคอลัมน์)
Nestable	ใช่
การเรียงลำดับคอลัมน์	ใช่

คอลัมน์เค้าโครงอัตโนมัติ

ใช้คลาสคอลัมน์เฉพาะจุดพักเพื่อให้ปรับขนาดคอลัมน์ได้ง่ายโดยไม่ต้องมีคลาสที่มีตัวเลขชัดเจน เช่น.col-sm-6.

เท่ากับความกว้าง

ตัวอย่างเช่น นี่คือเค้าโครงกริดสองแบบที่ใช้กับทุกอุปกรณ์และวิวพอร์ต จากxsเป็นxl. เพิ่มคลาสที่ไม่มีหน่วยจำนวนเท่าใดก็ได้สำหรับแต่ละเบรกพอยต์ที่คุณต้องการ และทุกคอลัมน์จะมีความกว้างเท่ากัน

1 จาก 2

2 จาก 2

1 จาก 3

2 จาก 3

3 จาก 3

<div class="container">
  <div class="row">
    <div class="col">
      1 of 2
    </div>
    <div class="col">
      2 of 2
    </div>
  </div>
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col">
      2 of 3
    </div>
    <div class="col">
      3 of 3
    </div>
  </div>
</div>

หลายบรรทัดที่มีความกว้างเท่ากัน

สร้างคอลัมน์ที่มีความกว้างเท่ากันซึ่งขยายหลายบรรทัดโดยแทรก.w-100ตำแหน่งที่คุณต้องการให้คอลัมน์แตกไปยังบรรทัดใหม่ ทำให้การแบ่งตอบสนองโดยผสม.w-100กับยูทิลิตี้การแสดงผลที่ตอบสนอง บาง อย่าง

มีบั๊กของ Safari flexboxที่ป้องกันไม่ให้สิ่งนี้ทำงานโดยไม่ได้ระบุอย่างชัดเจนflex-basisหรือborder. มีวิธีแก้ปัญหาสำหรับเบราว์เซอร์รุ่นเก่า แต่ไม่จำเป็นหากเบราว์เซอร์เป้าหมายของคุณไม่อยู่ในเวอร์ชันบั๊กกี้

col

<div class="container">
  <div class="row">
    <div class="col">col</div>
    <div class="col">col</div>
    <div class="w-100"></div>
    <div class="col">col</div>
    <div class="col">col</div>
  </div>
</div>

การตั้งค่าความกว้างหนึ่งคอลัมน์

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

1 จาก 3

2 จาก 3 (กว้างขึ้น)

3 จาก 3

1 จาก 3

2 จาก 3 (กว้างขึ้น)

3 จาก 3

<div class="container">
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col-6">
      2 of 3 (wider)
    </div>
    <div class="col">
      3 of 3
    </div>
  </div>
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col-5">
      2 of 3 (wider)
    </div>
    <div class="col">
      3 of 3
    </div>
  </div>
</div>

เนื้อหาความกว้างตัวแปร

ใช้col-{breakpoint}-autoคลาสเพื่อปรับขนาดคอลัมน์ตามความกว้างตามธรรมชาติของเนื้อหา

1 จาก 3

เนื้อหาความกว้างตัวแปร

3 จาก 3

1 จาก 3

เนื้อหาความกว้างตัวแปร

3 จาก 3

<div class="container">
  <div class="row justify-content-md-center">
    <div class="col col-lg-2">
      1 of 3
    </div>
    <div class="col-md-auto">
      Variable width content
    </div>
    <div class="col col-lg-2">
      3 of 3
    </div>
  </div>
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col-md-auto">
      Variable width content
    </div>
    <div class="col col-lg-2">
      3 of 3
    </div>
  </div>
</div>

ชั้นเรียนตอบสนอง

ตารางของ Bootstrap ประกอบด้วยคลาสที่กำหนดไว้ล่วงหน้าห้าระดับสำหรับการสร้างเลย์เอาต์ที่ตอบสนองที่ซับซ้อน ปรับแต่งขนาดคอลัมน์ของคุณบนอุปกรณ์ขนาดเล็กพิเศษ เล็ก กลาง ใหญ่ หรือใหญ่พิเศษ ตามที่คุณต้องการ

เบรกพอยต์ทั้งหมด

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

col

col-8

โคล-4

<div class="container">
  <div class="row">
    <div class="col">col</div>
    <div class="col">col</div>
    <div class="col">col</div>
    <div class="col">col</div>
  </div>
  <div class="row">
    <div class="col-8">col-8</div>
    <div class="col-4">col-4</div>
  </div>
</div>

ซ้อนกันเป็นแนวนอน

การใช้คลาสชุดเดียว.col-sm-*คุณสามารถสร้างระบบกริดพื้นฐานที่เริ่มต้นจากสแต็กและกลายเป็นแนวนอนที่เบรกพอยต์ขนาดเล็ก ( sm)

col-sm-8

col-sm-4

col-sm

<div class="container">
  <div class="row">
    <div class="col-sm-8">col-sm-8</div>
    <div class="col-sm-4">col-sm-4</div>
  </div>
  <div class="row">
    <div class="col-sm">col-sm</div>
    <div class="col-sm">col-sm</div>
    <div class="col-sm">col-sm</div>
  </div>
</div>

มิกซ์แอนด์แมทช์

ไม่ต้องการให้คอลัมน์ของคุณซ้อนกันในระดับกริดบางระดับใช่หรือไม่ ใช้คลาสต่างๆ รวมกันสำหรับแต่ละระดับตามต้องการ ดูตัวอย่างด้านล่างสำหรับแนวคิดที่ดีขึ้นเกี่ยวกับวิธีการทำงานทั้งหมด

.col-md-8

.col-6 .col-md-4

.col-6

<div class="container">
  <!-- Stack the columns on mobile by making one full-width and the other half-width -->
  <div class="row">
    <div class="col-md-8">.col-md-8</div>
    <div class="col-6 col-md-4">.col-6 .col-md-4</div>
  </div>

  <!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
  <div class="row">
    <div class="col-6 col-md-4">.col-6 .col-md-4</div>
    <div class="col-6 col-md-4">.col-6 .col-md-4</div>
    <div class="col-6 col-md-4">.col-6 .col-md-4</div>
  </div>

  <!-- Columns are always 50% wide, on mobile and desktop -->
  <div class="row">
    <div class="col-6">.col-6</div>
    <div class="col-6">.col-6</div>
  </div>
</div>

รางน้ำ

รางน้ำสามารถปรับการตอบสนองได้ด้วยการเติมเฉพาะจุดพักและคลาสยูทิลิตี้ระยะขอบเชิงลบ ในการเปลี่ยนรางน้ำในแถวที่กำหนด ให้จับคู่ยูทิลิตี้ระยะขอบติดลบกับยูทิลิตี้การ.rowเติมที่ตรงกันบน.cols อาจจำเป็นต้องปรับ or parent ด้วยเพื่อหลีกเลี่ยงการล้นที่ไม่ต้องการ โดยใช้ยูทิลิตี้ padding ที่ตรงกันอีก.containerครั้ง.container-fluid

นี่คือตัวอย่างการปรับแต่งตาราง Bootstrap ที่lgเบรกพอยต์ขนาดใหญ่ ( ) ขึ้นไป เราได้เพิ่ม.colpadding ด้วย.px-lg-5ตอบโต้ด้วย with .mx-lg-n5บน parent .rowแล้วปรับ.containerwrapper .px-lg-5ด้วย

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

<div class="container px-lg-5">
  <div class="row mx-lg-n5">
    <div class="col py-3 px-lg-5 border bg-light">Custom column padding</div>
    <div class="col py-3 px-lg-5 border bg-light">Custom column padding</div>
  </div>
</div>

คอลัมน์แถว

ใช้.row-cols-*คลาสแบบตอบสนองเพื่อกำหนดจำนวนคอลัมน์ที่แสดงผลเนื้อหาและเลย์เอาต์ของคุณได้ดีที่สุดอย่างรวดเร็ว ใน ขณะ.col-*ที่คลาสปกติใช้กับแต่ละคอลัมน์ (เช่น.col-md-4) คลาสของคอลัมน์แถวจะถูกตั้งค่าบนพา.rowเรนต์เป็นช็อตคัท

ใช้คลาสคอลัมน์แถวเหล่านี้เพื่อสร้างเลย์เอาต์กริดพื้นฐานอย่างรวดเร็วหรือเพื่อควบคุมเลย์เอาต์การ์ดของคุณ

คอลัมน์

<div class="container">
  <div class="row row-cols-2">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

คอลัมน์

<div class="container">
  <div class="row row-cols-3">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

คอลัมน์

<div class="container">
  <div class="row row-cols-4">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

คอลัมน์

<div class="container">
  <div class="row row-cols-4">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col-6">Column</div>
    <div class="col">Column</div>
  </div>
</div>

คอลัมน์

<div class="container">
  <div class="row row-cols-1 row-cols-sm-2 row-cols-md-4">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

คุณยังสามารถใช้มิกซ์อิน Sass ที่มาพร้อมกับrow-cols():

.element {
  // Three columns to start
  @include row-cols(3);

  // Five columns from medium breakpoint up
  @include media-breakpoint-up(md) {
    @include row-cols(5);
  }
}

การจัดตำแหน่ง

ใช้ยูทิลิตี้การจัดตำแหน่ง flexbox เพื่อจัดแนวคอลัมน์ในแนวตั้งและแนวนอน Internet Explorer 10-11 ไม่สนับสนุนการจัดแนวแนวตั้งของรายการ flex เมื่อคอนเทนเนอร์ flex มี a min-heightดังที่แสดงด้านล่าง ดู Flexbugs #3 สำหรับรายละเอียดเพิ่มเติม

การจัดตำแหน่งแนวตั้ง

หนึ่งในสามคอลัมน์

<div class="container">
  <div class="row align-items-start">
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
  </div>
  <div class="row align-items-center">
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
  </div>
  <div class="row align-items-end">
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
  </div>
</div>

หนึ่งในสามคอลัมน์

<div class="container">
  <div class="row">
    <div class="col align-self-start">
      One of three columns
    </div>
    <div class="col align-self-center">
      One of three columns
    </div>
    <div class="col align-self-end">
      One of three columns
    </div>
  </div>
</div>

การจัดตำแหน่งแนวนอน

หนึ่งในสองคอลัมน์

<div class="container">
  <div class="row justify-content-start">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-center">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-end">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-around">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-between">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
</div>

ไม่มีรางน้ำ

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

นี่คือซอร์สโค้ดสำหรับสร้างสไตล์เหล่านี้ โปรดทราบว่าการแทนที่คอลัมน์จะกำหนดขอบเขตเฉพาะคอลัมน์ย่อยแรกและกำหนดเป้าหมายผ่านตัวเลือกแอตทริบิวต์ แม้ว่าสิ่งนี้จะสร้างตัวเลือกที่เฉพาะเจาะจงมากขึ้น แต่การแพ็ดคอลัมน์ยังคงสามารถปรับแต่งเพิ่มเติมได้ด้วย ยูทิลิตี้ การเว้นวรรค

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

.no-gutters {
  margin-right: 0;
  margin-left: 0;

  > .col,
  > [class*="col-"] {
    padding-right: 0;
    padding-left: 0;
  }
}

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

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

.col-6 .col-md-4

<div class="row no-gutters">
  <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>

การห่อคอลัมน์

หากวางมากกว่า 12 คอลัมน์ภายในแถวเดียว กลุ่มของคอลัมน์พิเศษแต่ละกลุ่มจะรวมเป็นหนึ่งหน่วยในบรรทัดใหม่

.col-9

.col-4
เนื่องจาก 9 + 4 = 13 > 12 div ทั้ง 4 คอลัมน์นี้จึงถูกรวมไว้ในบรรทัดใหม่เป็นหน่วยที่ต่อเนื่องกัน

.col-6
คอลัมน์ที่ตามมาจะดำเนินต่อไปในบรรทัดใหม่

<div class="container">
  <div class="row">
    <div class="col-9">.col-9</div>
    <div class="col-4">.col-4<br>Since 9 + 4 = 13 &gt; 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.</div>
    <div class="col-6">.col-6<br>Subsequent columns continue along the new line.</div>
  </div>
</div>

ตัวแบ่งคอลัมน์

การแบ่งคอลัมน์เป็นบรรทัดใหม่ใน flexbox จำเป็นต้องมีการแฮ็กเล็กน้อย: เพิ่มองค์ประกอบด้วยwidth: 100%ทุกที่ที่คุณต้องการรวมคอลัมน์ของคุณเป็นบรรทัดใหม่ โดยปกติสามารถทำได้ด้วยหลาย ๆ.rows แต่ไม่ใช่ทุกวิธีการใช้งานที่สามารถอธิบายได้

.col-6 .col-sm-3

<div class="container">
  <div class="row">
    <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
    <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>

    <!-- Force next columns to break to new line -->
    <div class="w-100"></div>

    <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
    <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
  </div>
</div>

คุณยังสามารถใช้ตัวแบ่งนี้ที่จุดสั่งหยุดเฉพาะด้วยยูทิลิตีการแสดงผลที่ตอบสนองของ เรา

.col-6 .col-sm-4

<div class="container">
  <div class="row">
    <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
    <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>

    <!-- Force next columns to break to new line at md breakpoint and up -->
    <div class="w-100 d-none d-md-block"></div>

    <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
    <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
  </div>
</div>

จัดเรียงใหม่

สั่งซื้อคลาส

ใช้.order-คลาสเพื่อควบคุมลำดับภาพของเนื้อหาของคุณ คลาสเหล่านี้ตอบสนองได้ ดังนั้นคุณสามารถตั้งค่าorderตามจุดพัก (เช่น.order-1.order-md-2) รวมการสนับสนุน1ผ่าน12ระดับกริดทั้งห้า

ที่แรกใน DOM ไม่มีคำสั่งซื้อ

ที่สองใน DOM ด้วยคำสั่งซื้อที่ใหญ่กว่า

อันดับสามใน DOM โดยมีคำสั่งเท่ากับ 1

<div class="container">
  <div class="row">
    <div class="col">
      First in DOM, no order applied
    </div>
    <div class="col order-12">
      Second in DOM, with a larger order
    </div>
    <div class="col order-1">
      Third in DOM, with an order of 1
    </div>
  </div>
</div>

นอกจากนี้ยังมีการตอบสนอง.order-firstและ.order-lastคลาสที่เปลี่ยนorderองค์ประกอบโดยใช้order: -1และorder: 13( order: $columns + 1) ตามลำดับ คลาสเหล่านี้ยังสามารถผสมกับ.order-*คลาสที่มีหมายเลขได้ตามต้องการ

อันดับแรกใน DOM สั่งครั้งสุดท้าย

ที่สองใน DOM ไม่มีลำดับ

ที่สามใน DOM สั่งก่อน

<div class="container">
  <div class="row">
    <div class="col order-last">
      First in DOM, ordered last
    </div>
    <div class="col">
      Second in DOM, unordered
    </div>
    <div class="col order-first">
      Third in DOM, ordered first
    </div>
  </div>
</div>

คอลัมน์ออฟเซ็ต

คุณสามารถออฟเซ็ตคอลัมน์กริดได้สองวิธี: .offset-คลาสกริดที่ตอบสนองของเรา และยูทิลิตี้มาร์ จิ้นของเรา คลาสกริดมีขนาดให้ตรงกับคอลัมน์ในขณะที่ระยะขอบมีประโยชน์มากกว่าสำหรับเลย์เอาต์ด่วนที่ความกว้างของออฟเซ็ตเป็นตัวแปร

คลาสออฟเซ็ต

ย้ายคอลัมน์ไปทางขวาโดยใช้.offset-md-*คลาส ชั้นเรียนเหล่านี้เพิ่มระยะขอบด้านซ้ายของคอลัมน์ทีละ*คอลัมน์ ตัวอย่างเช่น.offset-md-4ย้าย.col-md-4มากกว่าสี่คอลัมน์

.col-md-4

.col-md-4 .offset-md-4

.col-md-3 .offset-md-3

.col-md-6 .offset-md-3

<div class="container">
  <div class="row">
    <div class="col-md-4">.col-md-4</div>
    <div class="col-md-4 offset-md-4">.col-md-4 .offset-md-4</div>
  </div>
  <div class="row">
    <div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
    <div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
  </div>
  <div class="row">
    <div class="col-md-6 offset-md-3">.col-md-6 .offset-md-3</div>
  </div>
</div>

นอกจากการล้างคอลัมน์ที่จุดสั่งหยุดแบบตอบสนองแล้ว คุณอาจต้องรีเซ็ตออฟเซ็ตด้วย ดูการดำเนินการนี้ในตัวอย่างกริด

.col-sm-5 .col-md-6

.col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0

.col-sm-6 .col-md-5 .col-lg-6

.col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0

<div class="container">
  <div class="row">
    <div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div>
    <div class="col-sm-5 offset-sm-2 col-md-6 offset-md-0">.col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0</div>
  </div>
  <div class="row">
    <div class="col-sm-6 col-md-5 col-lg-6">.col-sm-6 .col-md-5 .col-lg-6</div>
    <div class="col-sm-6 col-md-5 offset-md-2 col-lg-6 offset-lg-0">.col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0</div>
  </div>
</div>

ยูทิลิตี้มาร์จิ้น

เมื่อย้ายไปที่ flexbox ใน v4 คุณสามารถใช้ยูทิลิตี้มาร์จิ้น เช่น.mr-autoบังคับให้คอลัมน์พี่น้องออกจากกัน

.col-md-4

.col-md-4 .ml-auto

.col-md-3 .ml-md-auto

.col-auto .mr-auto

.col-auto

<div class="container">
  <div class="row">
    <div class="col-md-4">.col-md-4</div>
    <div class="col-md-4 ml-auto">.col-md-4 .ml-auto</div>
  </div>
  <div class="row">
    <div class="col-md-3 ml-md-auto">.col-md-3 .ml-md-auto</div>
    <div class="col-md-3 ml-md-auto">.col-md-3 .ml-md-auto</div>
  </div>
  <div class="row">
    <div class="col-auto mr-auto">.col-auto .mr-auto</div>
    <div class="col-auto">.col-auto</div>
  </div>
</div>

การทำรัง

หากต้องการซ้อนเนื้อหาของคุณด้วยกริดเริ่มต้น ให้เพิ่มคอลัมน์ใหม่.rowและชุดของ.col-sm-*คอลัมน์ภายในคอลัมน์ที่มี.col-sm-*อยู่ แถวที่ซ้อนกันควรมีชุดของคอลัมน์ที่รวมกันได้ไม่เกิน 12 คอลัมน์ (คุณไม่จำเป็นต้องใช้คอลัมน์ที่มีอยู่ทั้งหมด 12 คอลัมน์)

ระดับ 1: .col-sm-9

ระดับ 2: .col-8 .col-sm-6

ระดับ 2: .col-4 .col-sm-6

<div class="container">
  <div class="row">
    <div class="col-sm-9">
      Level 1: .col-sm-9
      <div class="row">
        <div class="col-8 col-sm-6">
          Level 2: .col-8 .col-sm-6
        </div>
        <div class="col-4 col-sm-6">
          Level 2: .col-4 .col-sm-6
        </div>
      </div>
    </div>
  </div>
</div>

มิกซ์อิน S

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

ตัวแปร

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

$grid-columns:      12;
$grid-gutter-width: 30px;

$grid-breakpoints: (
  // Extra small screen / phone
  xs: 0,
  // Small screen / phone
  sm: 576px,
  // Medium screen / tablet
  md: 768px,
  // Large screen / desktop
  lg: 992px,
  // Extra large screen / wide desktop
  xl: 1200px
);

$container-max-widths: (
  sm: 540px,
  md: 720px,
  lg: 960px,
  xl: 1140px
);

มิกซ์อิน

ใช้มิกซ์อินร่วมกับตัวแปรกริดเพื่อสร้าง CSS เชิงความหมายสำหรับคอลัมน์กริดแต่ละคอลัมน์

// Creates a wrapper for a series of columns
@include make-row();

// Make the element grid-ready (applying everything but the width)
@include make-col-ready();
@include make-col($size, $columns: $grid-columns);

// Get fancy by offsetting, or changing the sort order
@include make-col-offset($size, $columns: $grid-columns);

ตัวอย่างการใช้งาน

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

.example-container {
  width: 800px;
  @include make-container();
}

.example-row {
  @include make-row();
}

.example-content-main {
  @include make-col-ready();

  @include media-breakpoint-up(sm) {
    @include make-col(6);
  }
  @include media-breakpoint-up(lg) {
    @include make-col(8);
  }
}

.example-content-secondary {
  @include make-col-ready();

  @include media-breakpoint-up(sm) {
    @include make-col(6);
  }
  @include media-breakpoint-up(lg) {
    @include make-col(4);
  }
}

เนื้อหาหลัก

เนื้อหารอง

<div class="example-container">
  <div class="example-row">
    <div class="example-content-main">Main content</div>
    <div class="example-content-secondary">Secondary content</div>
  </div>
</div>

การปรับแต่งกริด

การใช้ตัวแปร Sass แบบกริดและแผนที่ในตัวของเรา ทำให้สามารถปรับแต่งคลาสกริดที่กำหนดไว้ล่วงหน้าได้อย่างสมบูรณ์ เปลี่ยนจำนวนชั้น มิติคิวรีสื่อ และความกว้างคอนเทนเนอร์—จากนั้นคอมไพล์ใหม่

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

จำนวนคอลัมน์กริดสามารถแก้ไขได้โดยใช้ตัวแปร Sass $grid-columnsใช้เพื่อสร้างความกว้าง (เป็นเปอร์เซ็นต์) ของแต่ละคอลัมน์ในขณะที่$grid-gutter-widthกำหนดความกว้างสำหรับรางน้ำของคอลัมน์

$grid-columns: 12 !default;
$grid-gutter-width: 30px !default;

ระดับกริด

คุณยังสามารถปรับแต่งจำนวนชั้นกริดได้อีกด้วย หากคุณต้องการเพียงสี่ระดับกริด คุณจะต้องอัปเดต$grid-breakpointsและ$container-max-widthsเป็นดังนี้:

$grid-breakpoints: (
  xs: 0,
  sm: 480px,
  md: 768px,
  lg: 1024px
);

$container-max-widths: (
  sm: 420px,
  md: 720px,
  lg: 960px
);

เมื่อทำการเปลี่ยนแปลงใดๆ กับตัวแปร Sass หรือแผนที่ คุณจะต้องบันทึกการเปลี่ยนแปลงและคอมไพล์ใหม่ การทำเช่นนั้นจะสร้างชุดคลาสกริดที่กำหนดไว้ล่วงหน้าชุดใหม่สำหรับความกว้างของคอลัมน์ ออฟเซ็ต และการจัดลำดับ ยูทิลิตี้การมองเห็นที่ตอบสนองจะได้รับการอัปเดตเพื่อใช้เบรกพอยต์ที่กำหนดเอง ตรวจสอบให้แน่ใจว่าได้ตั้งค่ากริดในpx(ไม่ใช่rem, em, หรือ%)