โพสต์นี้จะกล่าวถึงช่องว่างของรางน้ำและวิธีนำออกสำหรับ div เฉพาะใน Bootstrap
Gutter Space ใน Bootstrap คืออะไร?
รางน้ำคือช่องว่างหรือช่องว่างระหว่างเสาที่เกิดจากการเติมแนวนอน ใช้เพื่อสนับสนุนการจัดตำแหน่งเนื้อหาที่ตอบสนองและพื้นที่ในระบบกริด Bootstrap
ภาพด้านล่างแสดงแถวที่มีขอบสีแดงล้อมรอบ ภายในแถว มีองค์ประกอบ div ขนาดเท่ากันสามตัวของคอลัมน์กริดที่เท่ากัน แม้ว่าคอลัมน์จะเท่ากัน แต่ก็ยังมีช่องว่างระหว่างคอลัมน์:
จะลบ Gutter Space สำหรับ div เฉพาะใน Bootstrap ได้อย่างไร
ใน Bootstrap คลาส “ ไม่มีรางน้ำ ” ใช้เพื่อกำจัดช่องว่างรางน้ำของ div ใดๆ
เพื่อจุดประสงค์นี้:
- เพิ่ม ' ” แท็กพร้อมกับชั้นเรียน “ หลัก div '.
- จากนั้น ปรับส่วนของแถวโดยเพิ่มอีก “
” องค์ประกอบกับคลาส “ แถว '. เนื่องจากเราต้องลบช่องว่างออกจากแถว ระบุคลาส “ ไม่มีรางน้ำ ' อยู่ภายใน.- ในการแบ่งแถวกริดออกเป็นสามคอลัมน์เท่าๆ กัน ให้ใช้คลาส “ โคล-4 '.
- ภายในคอนเทนเนอร์ “
” ของแต่ละคอลัมน์ ปรับองค์ประกอบ “” ด้วยคลาส “ คอลัมน์-1 ”, “ คอลัมน์-2 ', และ ' คอลัมน์-3 ” ตามลำดับ: < แผนก ระดับ = 'หลัก div' >
< แผนก ระดับ = 'แถวไม่มีรางน้ำ' >
< แผนก ระดับ = 'คอล-4' >
< แผนก ระดับ = 'คอลัมน์-1' >< / แผนก >
< / แผนก >
< แผนก ระดับ = 'โคล-4' >
< แผนก ระดับ = 'คอลัมน์-2' >< / แผนก >
< / แผนก >
< แผนก ระดับ = 'โคล-4' >
< แผนก ระดับ = 'คอลัมน์-3' >< / แผนก >
< / แผนก >
< / แผนก >
< / แผนก >ซีเอสเอส
ในส่วน CSS คลาสที่กล่าวถึงในหน้า HTML นั้นได้รับการกำหนดรูปแบบด้วยคุณสมบัติการจัดรูปแบบหลายอย่าง
สไตล์คลาส 'main-div'
.main-div {
ความกว้าง : 600px;
ขอบ: อัตโนมัติ 50px;
}“ .main-div ” ถูกกล่าวถึงเพื่อเข้าถึงองค์ประกอบ div ที่มีคลาส “ หลัก div '. คุณสมบัติต่อไปนี้ใช้กับคลาสนี้:
- “ ความกว้าง ” กำหนดความกว้างขององค์ประกอบ
- “ ขอบ ” กำหนดระยะห่างรอบองค์ประกอบ
สไตล์คลาส 'แถว'
.แถว {
ชายแดน : 1px สีแดงทึบ;
}บูตสแตรป “ แถว ” คลาสถูกเพิ่มด้วย “ ชายแดน ' คุณสมบัติ. วิธีนี้จะล้อมแถวกริดด้วยความกว้าง สไตล์ และเส้นขอบสีที่ระบุ
สามคลาส “ คอลัมน์-1 ”, “ คอลัมน์-2 ', และ ' คอลัมน์-3 ” ถูกกำหนดให้เป็น CSS “ สีพื้นหลัง ' และ ' ความสูง ” คุณสมบัติทำให้โด่ง
สไตล์คลาส 'คอลัมน์-1'
.คอลัมน์- หนึ่ง {
พื้นหลัง- สี : สีฟ้าคราม;
ความสูง : 200px;
}สไตล์คลาส 'คอลัมน์-2'
.คอลัมน์- 2 {
พื้นหลัง- สี : สีม่วง;
ความสูง : 200px;
}สไตล์คลาส 'คอลัมน์-3'
.คอลัมน์- 3 {
พื้นหลัง- สี : เหลืองเขียว;
ความสูง : 200px;
}สังเกตได้ว่า “
”คอนเทนเนอร์กับคลาส” แถว ” ได้รับการปรับเรียบร้อยแล้วโดยไม่มีช่องว่างระหว่างกัน:
เราได้สอนวิธีลบพื้นที่รางน้ำสำหรับ div เฉพาะใน Bootstrap
บทสรุป
หากต้องการลบช่องว่างรางน้ำสำหรับ div เฉพาะ คลาส “ ไม่มีรางน้ำ ' สามารถใช้ได้. เพื่อจุดประสงค์นี้ ให้เพิ่ม “
” องค์ประกอบพร้อมกับ “ แถวที่ไม่มีรางน้ำ ' ระดับ. โพสต์นี้ได้ให้คำแนะนำอย่างครอบคลุมเกี่ยวกับ Gutter Spaces และวิธีการกำจัดพวกมันสำหรับ div เฉพาะใน Bootstrap - จากนั้น ปรับส่วนของแถวโดยเพิ่มอีก “