ระยะห่าง
Bootstrap มีระยะขอบตอบสนองการจดชวเลขที่หลากหลายและคลาสยูทิลิตี้การเติมเพื่อแก้ไขลักษณะที่ปรากฏขององค์ประกอบ
มันทำงานอย่างไร
กำหนดการตอบสนองที่เป็นมิตรmargin
หรือpadding
ค่าให้กับองค์ประกอบหรือชุดย่อยของด้านที่มีคลาสชวเลข รวมถึงการรองรับคุณสมบัติแต่ละรายการ คุณสมบัติทั้งหมด และคุณสมบัติแนวตั้งและแนวนอน คลาสถูกสร้างขึ้นจากแผนที่ Sass เริ่มต้นตั้งแต่.25rem
ถึง3rem
.
สัญกรณ์
ยูทิลิตีการเว้นวรรคที่ใช้กับเบรกพอยต์ทั้งหมด จากxs
ถึง ถึงxl
ไม่มีตัวย่อเบรกพอยต์ในตัว นี่เป็นเพราะว่าคลาสเหล่านั้นถูกนำไปใช้ตั้งแต่min-width: 0
ขึ้นไป ดังนั้นจึงไม่ถูกผูกไว้โดยเคียวรีสื่อ อย่างไรก็ตาม จุดพักที่เหลือจะรวมตัวย่อของเบรกพอยต์ด้วย
ตั้งชื่อคลาสโดยใช้รูปแบบ{property}{sides}-{size}
for xs
และ{property}{sides}-{breakpoint}-{size}
for sm
, md
, , lg
และxl
โดยที่ทรัพย์สินเป็นหนึ่งใน:
m
- สำหรับคลาสที่กำหนดmargin
p
- สำหรับคลาสที่กำหนดpadding
โดยที่ด้านเป็นหนึ่งใน:
t
- สำหรับคลาสที่ตั้งmargin-top
หรือpadding-top
b
- สำหรับคลาสที่ตั้งmargin-bottom
หรือpadding-bottom
l
- สำหรับคลาสที่ตั้งmargin-left
หรือpadding-left
r
- สำหรับคลาสที่ตั้งmargin-right
หรือpadding-right
x
- สำหรับคลาสที่กำหนดทั้ง*-left
และ*-right
y
- สำหรับคลาสที่กำหนดทั้ง*-top
และ*-bottom
- ว่าง - สำหรับคลาสที่ตั้งค่า a
margin
หรือpadding
ทั้ง 4 ด้านขององค์ประกอบ
โดยที่ขนาดเป็นหนึ่งใน:
0
- สำหรับชั้นเรียนที่กำจัดmargin
หรือpadding
โดยการตั้งค่าเป็น0
1
- (โดยค่าเริ่มต้น) สำหรับคลาสที่ตั้งค่าmargin
หรือpadding
เป็น$spacer * .25
2
- (โดยค่าเริ่มต้น) สำหรับคลาสที่ตั้งค่าmargin
หรือpadding
เป็น$spacer * .5
3
- (โดยค่าเริ่มต้น) สำหรับคลาสที่ตั้งค่าmargin
หรือpadding
เป็น$spacer
4
- (โดยค่าเริ่มต้น) สำหรับคลาสที่ตั้งค่าmargin
หรือpadding
เป็น$spacer * 1.5
5
- (โดยค่าเริ่มต้น) สำหรับคลาสที่ตั้งค่าmargin
หรือpadding
เป็น$spacer * 3
auto
- สำหรับคลาสที่ตั้งค่าเป็นmargin
auto
(คุณสามารถเพิ่มขนาดเพิ่มเติมได้โดยการเพิ่มรายการลงใน$spacers
ตัวแปรแผนที่ Sass)
ตัวอย่าง
นี่คือตัวอย่างบางส่วนของคลาสเหล่านี้:
.mt-0 {
margin-top: 0 !important;
}
.ml-1 {
margin-left: ($spacer * .25) !important;
}
.px-2 {
padding-left: ($spacer * .5) !important;
padding-right: ($spacer * .5) !important;
}
.p-3 {
padding: $spacer !important;
}
การจัดกึ่งกลางแนวนอน
นอกจากนี้ Bootstrap ยังรวม.mx-auto
คลาสสำหรับเนื้อหาระดับบล็อกที่มีความกว้างคงที่ในแนวนอนที่อยู่ตรงกลาง นั่นคือ เนื้อหาที่มีdisplay: block
และwidth
ชุด โดยการตั้งค่าระยะขอบแนวนอนเป็นauto
.
<div class="mx-auto" style="width: 200px;">
Centered element
</div>
ระยะขอบติดลบ
ใน CSS margin
คุณสมบัติสามารถใช้ค่าลบ ( padding
ไม่สามารถ) ณ เวอร์ชัน 4.2 เราได้เพิ่มยูทิลิตี้มาร์จินติดลบสำหรับทุกขนาดจำนวนเต็มที่ไม่ใช่ศูนย์ตามรายการด้านบน (เช่น , 1
, 2
, 3
, 4
, 5
) โปรแกรมอรรถประโยชน์เหล่านี้เหมาะอย่างยิ่งสำหรับการปรับแต่งรางน้ำคอลัมน์กริดตามจุดสั่งหยุด
ไวยากรณ์เกือบจะเหมือนกับค่าดีฟอลต์ ยูทิลิตี้มาร์จิ้นที่เป็นบวก แต่มีการเพิ่มn
ก่อนขนาดที่ร้องขอ นี่คือคลาสตัวอย่างที่ตรงกันข้ามกับ.mt-1
:
.mt-n1 {
margin-top: -0.25rem !important;
}
นี่คือตัวอย่างการปรับแต่งตาราง Bootstrap ที่md
เบรกพอยต์สื่อ ( ) ขึ้นไป เราได้เพิ่ม.col
ช่องว่างภายในด้วย.px-md-5
แล้วจึงแก้ไขด้วยบน.mx-md-n5
parent.row
<div class="row mx-md-n5">
<div class="col px-md-5"><div class="p-3 border bg-light">Custom column padding</div></div>
<div class="col px-md-5"><div class="p-3 border bg-light">Custom column padding</div></div>
</div>