ระยะห่าง

Bootstrap มีคลาสยูทิลิตี้ที่ตอบสนองชวเลขหลากหลาย ช่องว่างภายใน และช่องว่างเพื่อแก้ไขลักษณะที่ปรากฏขององค์ประกอบ

ในหน้านี้

ขอบและช่องว่างภายใน

กำหนดการตอบสนองที่เป็นมิตรmarginหรือpaddingค่าให้กับองค์ประกอบหรือชุดย่อยของด้านที่มีคลาสชวเลข รวมถึงการรองรับคุณสมบัติแต่ละรายการ คุณสมบัติทั้งหมด และคุณสมบัติแนวตั้งและแนวนอน คลาสถูกสร้างขึ้นจากแผนที่ Sass เริ่มต้นตั้งแต่.25remถึง3rem.

ใช้โมดูลเค้าโครง CSS Grid หรือไม่ ลองใช้ ยูทิลิตี้ช่องว่างแทน

สัญกรณ์

ยูทิลิตีการเว้นวรรคที่ใช้กับเบรกพอยต์ทั้งหมด จากxsถึง ถึงxxlไม่มีตัวย่อเบรกพอยต์ในตัว นี่เป็นเพราะว่าคลาสเหล่านั้นถูกนำไปใช้ตั้งแต่min-width: 0ขึ้นไป ดังนั้นจึงไม่ถูกผูกไว้โดยเคียวรีสื่อ อย่างไรก็ตาม จุดพักที่เหลือจะรวมตัวย่อของเบรกพอยต์ด้วย

ตั้งชื่อคลาสโดยใช้รูปแบบ{property}{sides}-{size}for xsและ{property}{sides}-{breakpoint}-{size}for sm, md, lg, , xlและxxl

โดยที่ทรัพย์สินเป็นหนึ่งใน:

m- สำหรับคลาสที่กำหนดmargin
p- สำหรับคลาสที่กำหนดpadding

โดยที่ด้านเป็นหนึ่งใน:

t- สำหรับคลาสที่ตั้งmargin-topหรือpadding-top
b- สำหรับคลาสที่ตั้งmargin-bottomหรือpadding-bottom
s- (เริ่ม) สำหรับคลาสที่ตั้งค่าmargin-leftหรือpadding-leftใน LTR margin-rightหรือpadding-rightใน RTL
e- (จบ) สำหรับคลาสที่ตั้งค่าmargin-rightหรือpadding-rightใน LTR margin-leftหรือpadding-leftใน RTL
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;
}

.ms-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ไม่สามารถ) ระยะขอบเชิงลบเหล่านี้ถูกปิดใช้งานโดยค่าเริ่มต้นแต่สามารถเปิดใช้งานใน Sass ได้โดยการตั้ง$enable-negative-margins: trueค่า

ไวยากรณ์เกือบจะเหมือนกับค่าดีฟอลต์ ยูทิลิตี้มาร์จิ้นที่เป็นบวก แต่มีการเพิ่มnก่อนขนาดที่ร้องขอ นี่คือคลาสตัวอย่างที่ตรงกันข้ามกับ.mt-1:

.mt-n1 {
  margin-top: -0.25rem !important;
}

ช่องว่าง

เมื่อใช้display: gridคุณสามารถใช้gapยูทิลิตี้บนคอนเทนเนอร์กริดหลักได้ วิธีนี้จะช่วยประหยัดได้โดยไม่ต้องเพิ่มยูทิลิตี้มาร์จิ้นให้กับรายการกริดแต่ละรายการ (ลูกของdisplay: gridคอนเทนเนอร์) ยูทิลิตี้ Gap จะตอบสนองตามค่าเริ่มต้น และสร้างขึ้นผ่าน API ยูทิลิตี้ของเรา โดยอิงตาม$spacersแผนที่ Sass

รายการกริด 1

รายการกริด 2

รายการกริด 3

html

<div class="d-grid gap-3">
  <div class="p-2 bg-light border">Grid item 1</div>
  <div class="p-2 bg-light border">Grid item 2</div>
  <div class="p-2 bg-light border">Grid item 3</div>
</div>

การสนับสนุนรวมถึงตัวเลือกการตอบสนองสำหรับเบรกพอยต์กริดของ Bootstrap ทั้งหมด รวมถึงหกขนาดจาก$spacersแผนที่ ( 0– 5) ไม่มี.gap-autoคลาสยูทิลิตี้เพราะมันมีประสิทธิภาพเหมือนกับ.gap-0.

ซาส

แผนที่

ยูทิลิตี้การเว้นวรรคจะถูกประกาศผ่านแผนที่ Sass แล้วสร้างด้วย API ยูทิลิตี้ของเรา

$spacer: 1rem;
$spacers: (
  0: 0,
  1: $spacer * .25,
  2: $spacer * .5,
  3: $spacer,
  4: $spacer * 1.5,
  5: $spacer * 3,
);

ยูทิลิตี้ API

ยูทิลิตี้การเว้นวรรคได้รับการประกาศในยูทิลิตี้ API ของเราในscss/_utilities.scss. เรียนรู้วิธีใช้ยูทิลิตี้ API

    "margin": (
      responsive: true,
      property: margin,
      class: m,
      values: map-merge($spacers, (auto: auto))
    ),
    "margin-x": (
      responsive: true,
      property: margin-right margin-left,
      class: mx,
      values: map-merge($spacers, (auto: auto))
    ),
    "margin-y": (
      responsive: true,
      property: margin-top margin-bottom,
      class: my,
      values: map-merge($spacers, (auto: auto))
    ),
    "margin-top": (
      responsive: true,
      property: margin-top,
      class: mt,
      values: map-merge($spacers, (auto: auto))
    ),
    "margin-end": (
      responsive: true,
      property: margin-right,
      class: me,
      values: map-merge($spacers, (auto: auto))
    ),
    "margin-bottom": (
      responsive: true,
      property: margin-bottom,
      class: mb,
      values: map-merge($spacers, (auto: auto))
    ),
    "margin-start": (
      responsive: true,
      property: margin-left,
      class: ms,
      values: map-merge($spacers, (auto: auto))
    ),
    // Negative margin utilities
    "negative-margin": (
      responsive: true,
      property: margin,
      class: m,
      values: $negative-spacers
    ),
    "negative-margin-x": (
      responsive: true,
      property: margin-right margin-left,
      class: mx,
      values: $negative-spacers
    ),
    "negative-margin-y": (
      responsive: true,
      property: margin-top margin-bottom,
      class: my,
      values: $negative-spacers
    ),
    "negative-margin-top": (
      responsive: true,
      property: margin-top,
      class: mt,
      values: $negative-spacers
    ),
    "negative-margin-end": (
      responsive: true,
      property: margin-right,
      class: me,
      values: $negative-spacers
    ),
    "negative-margin-bottom": (
      responsive: true,
      property: margin-bottom,
      class: mb,
      values: $negative-spacers
    ),
    "negative-margin-start": (
      responsive: true,
      property: margin-left,
      class: ms,
      values: $negative-spacers
    ),
    // Padding utilities
    "padding": (
      responsive: true,
      property: padding,
      class: p,
      values: $spacers
    ),
    "padding-x": (
      responsive: true,
      property: padding-right padding-left,
      class: px,
      values: $spacers
    ),
    "padding-y": (
      responsive: true,
      property: padding-top padding-bottom,
      class: py,
      values: $spacers
    ),
    "padding-top": (
      responsive: true,
      property: padding-top,
      class: pt,
      values: $spacers
    ),
    "padding-end": (
      responsive: true,
      property: padding-right,
      class: pe,
      values: $spacers
    ),
    "padding-bottom": (
      responsive: true,
      property: padding-bottom,
      class: pb,
      values: $spacers
    ),
    "padding-start": (
      responsive: true,
      property: padding-left,
      class: ps,
      values: $spacers
    ),
    // Gap utility
    "gap": (
      responsive: true,
      property: gap,
      class: gap,
      values: $spacers
    ),