ระยะห่าง

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>

ระยะขอบติดลบ

ใน 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-n5parent.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>