ระยะห่าง

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- สำหรับคลาสที่ตั้งค่าเป็นmarginauto

(คุณสามารถเพิ่มขนาดเพิ่มเติมได้โดยการเพิ่มรายการลงใน$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>