ระบบกริด
ใช้ตาราง 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-sm
will แต่ละรายการจะมีความกว้างโดยอัตโนมัติ 25% จากเบรกพอยต์ขนาดเล็กขึ้นไป ดู ส่วน คอลัมน์เค้าโครงอัตโนมัติสำหรับตัวอย่างเพิ่มเติม - คลาสคอลัมน์ระบุจำนวนคอลัมน์ที่คุณต้องการใช้จากจำนวนที่เป็นไปได้ 12 คอลัมน์ต่อแถว ดังนั้น ถ้าคุณต้องการคอลัมน์ที่มีความกว้างเท่ากันสามคอลัมน์ คุณสามารถใช้
.col-4
. - คอลัมน์
width
ถูกกำหนดเป็นเปอร์เซ็นต์ ดังนั้นจึงเป็นแบบไหลและขนาดสัมพันธ์กับองค์ประกอบหลักเสมอ - คอลัมน์มีแนวนอน
padding
เพื่อสร้างรางน้ำระหว่างแต่ละคอลัมน์ อย่างไรก็ตาม คุณสามารถลบออกmargin
จากแถวและpadding
ออกจากคอลัมน์ด้วย.no-gutters
บน.row
- ในการทำให้กริดตอบสนองได้ มีเบรกพอยต์กริดห้าจุด หนึ่ง จุดต่อเบรกพอยต์ที่ ตอบสนองแต่ละจุด : เบรกพอยต์ทั้งหมด (เล็กพิเศษ) เล็ก กลาง ใหญ่ และใหญ่พิเศษ
- เบรกพอยต์ของกริดอ้างอิงจากการสืบค้นสื่อความกว้างขั้นต่ำ ซึ่งหมายความว่าจะใช้กับเบรกพอยต์นั้นและทั้งหมดที่อยู่ด้านบนนั้น (เช่น
.col-sm-4
ใช้กับอุปกรณ์ขนาดเล็ก กลาง ใหญ่ และขนาดใหญ่พิเศษ แต่ไม่ใช่xs
เบรกพอยต์แรก) - คุณสามารถใช้คลาสกริดที่กำหนดไว้ล่วงหน้า (เช่น
.col-4
) หรือมิกซ์อิน Sassสำหรับมาร์กอัปเชิงความหมายเพิ่มเติม
ระวังข้อจำกัดและข้อบกพร่องของ flexboxเช่น การไม่สามารถใช้องค์ประกอบ HTML บางอย่างเป็นคอนเทนเนอร์แบบยืดหยุ่นได้
ตัวเลือกกริด
ในขณะที่ Bootstrap ใช้em
s หรือrem
s เพื่อกำหนดขนาดส่วนใหญ่ แต่px
s จะใช้สำหรับจุดหยุดกริดและความกว้างของคอนเทนเนอร์ เนื่องจากความกว้างของวิวพอร์ตเป็นพิกเซลและไม่เปลี่ยนแปลงตามขนาดฟอนต์
ดูว่าแง่มุมต่างๆ ของระบบกริด 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
. เพิ่มคลาสที่ไม่มีหน่วยจำนวนเท่าใดก็ได้สำหรับแต่ละเบรกพอยต์ที่คุณต้องการ และทุกคอลัมน์จะมีความกว้างเท่ากัน
<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
. มีวิธีแก้ปัญหาสำหรับเบราว์เซอร์รุ่นเก่า แต่ไม่จำเป็นหากเบราว์เซอร์เป้าหมายของคุณไม่อยู่ในเวอร์ชันบั๊กกี้
<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 ยังหมายความว่าคุณสามารถกำหนดความกว้างของคอลัมน์หนึ่งและให้คอลัมน์พี่น้องปรับขนาดรอบคอลัมน์โดยอัตโนมัติได้ คุณสามารถใช้คลาสกริดที่กำหนดไว้ล่วงหน้า (ดังที่แสดงด้านล่าง) กริดมิกซ์อิน หรือความกว้างแบบอินไลน์ โปรดทราบว่าคอลัมน์อื่นๆ จะปรับขนาดไม่ว่าความกว้างของคอลัมน์กลางจะเป็นเท่าใด
<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
คลาสเพื่อปรับขนาดคอลัมน์ตามความกว้างตามธรรมชาติของเนื้อหา
<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
มิฉะนั้น อย่าลังเลที่จะติด
<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
)
<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>
มิกซ์แอนด์แมทช์
ไม่ต้องการให้คอลัมน์ของคุณซ้อนกันในระดับกริดบางระดับใช่หรือไม่ ใช้คลาสต่างๆ รวมกันสำหรับแต่ละระดับตามต้องการ ดูตัวอย่างด้านล่างสำหรับแนวคิดที่ดีขึ้นเกี่ยวกับวิธีการทำงานทั้งหมด
<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
เติมที่ตรงกันบน.col
s อาจจำเป็นต้องปรับ or parent ด้วยเพื่อหลีกเลี่ยงการล้นที่ไม่ต้องการ โดยใช้ยูทิลิตี้ padding ที่ตรงกันอีก.container
ครั้ง.container-fluid
นี่คือตัวอย่างการปรับแต่งตาราง Bootstrap ที่lg
เบรกพอยต์ขนาดใหญ่ ( ) ขึ้นไป เราได้เพิ่ม.col
padding ด้วย.px-lg-5
ตอบโต้ด้วย with .mx-lg-n5
บน parent .row
แล้วปรับ.container
wrapper .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;
}
}
ในทางปฏิบัติมีลักษณะดังนี้ โปรดทราบว่าคุณสามารถใช้สิ่งนี้กับคลาสกริดที่กำหนดไว้ล่วงหน้าอื่นๆ ทั้งหมดได้ (รวมถึงความกว้างของคอลัมน์ ระดับที่ตอบสนอง การเรียงลำดับใหม่ และอื่นๆ)
<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 คอลัมน์ภายในแถวเดียว กลุ่มของคอลัมน์พิเศษแต่ละกลุ่มจะรวมเป็นหนึ่งหน่วยในบรรทัดใหม่
เนื่องจาก 9 + 4 = 13 > 12 div ทั้ง 4 คอลัมน์นี้จึงถูกรวมไว้ในบรรทัดใหม่เป็นหน่วยที่ต่อเนื่องกัน
คอลัมน์ที่ตามมาจะดำเนินต่อไปในบรรทัดใหม่
<div class="container">
<div class="row">
<div class="col-9">.col-9</div>
<div class="col-4">.col-4<br>Since 9 + 4 = 13 > 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%
ทุกที่ที่คุณต้องการรวมคอลัมน์ของคุณเป็นบรรทัดใหม่ โดยปกติสามารถทำได้ด้วยหลาย ๆ.row
s แต่ไม่ใช่ทุกวิธีการใช้งานที่สามารถอธิบายได้
<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>
คุณยังสามารถใช้ตัวแบ่งนี้ที่จุดสั่งหยุดเฉพาะด้วยยูทิลิตีการแสดงผลที่ตอบสนองของ เรา
<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
ระดับกริดทั้งห้า
<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-*
คลาสที่มีหมายเลขได้ตามต้องการ
<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
มากกว่าสี่คอลัมน์
<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>
นอกจากการล้างคอลัมน์ที่จุดสั่งหยุดแบบตอบสนองแล้ว คุณอาจต้องรีเซ็ตออฟเซ็ตด้วย ดูการดำเนินการนี้ในตัวอย่างกริด
<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
บังคับให้คอลัมน์พี่น้องออกจากกัน
<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 คอลัมน์)
<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 {
@include make-container();
// Make sure to define this width after the mixin to override
// `width: 100%` generated by `make-container()`
width: 800px;
}
.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
, หรือ%
)