간격

Bootstrap에는 요소의 모양을 수정하기 위한 광범위한 반응형 gap, padding 및 margin 유틸리티 클래스가 포함되어 있습니다.

마진과 패딩

약칭 클래스를 사용하여 요소 또는 측면의 자식 집합에 반응형 margin 또는 padding 값을 할당합니다. 개별 속성, 모든 속성, 수직 및 수평 속성에 대한 지원이 포함됩니다. 클래스는 .25rem에서 3rem 범위의 기본 Sass 맵에서 빌드됩니다.

CSS 그리드 시스템 모듈을 사용하십니까? 대신에 갭 유틸리티를 사용해보세요.

표기

xs에서 xxl까지 모든 중단점에 적용되는 간격 유틸리티에는 별도의 중단점 약어가 없습니다. 이는 이러한 클래스가 min-width : 0 이상에서 적용되므로 미디어 쿼리에 의해 바인딩되지 않기 때문입니다. 그러나 나머지 중단점에는 중단점 약어가 포함됩니다.

클래스는 xs의 경우 {property} {sides}-{size} 형식을 사용하고 sm, md, lg, xl의 경우 {property} {sides}-{breakpoint}-{size} 형식을 사용하여 이름이 지정됩니다.

속성 - property:

m - margin 클래스 설정
p - padding 클래스 설정

방향 - sides:

t - margin-top 또는 padding-top 클래스 설정
b - margin-bottom 또는 padding-bottom 클래스 설정
s - (start) LTR에서는 margin-left 또는 padding-left 클래스, RTL에서는 margin-right 또는 padding-right 클래스 설정
e - (end) for classes that set margin-right 또는 padding-right 클래스, RTL에서는 margin-left 또는 padding-left 클래스 설정
x - *-left와 *-right 모두 클래스 설정
y - *-top과 *-bottom 모두 클래스 설정
값 없음 - 요소의 4면 모두에 margin 또는 padding을 설정하는 클래스의 경우

크기 - size:

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을 자동으로 설정한 클래스의 경우

($ 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에는 가로 여백을 auto로 설정하여 고정 너비 블록 수준 콘텐츠, 즉 display: block과 width이 설정된 콘텐츠를 가로 중앙에 배치하는 .mx-auto 클래스도 포함되어 있습니다.

Centered element

<div class="mx-auto p-2" style="width: 200px;">
  Centered element
</div>

음수 마진

CSS에서 margin 속성은 음수 값을 사용할 수 있습니다 (padding은 사용할 수 없음). 이러한 음수 여백은 기본적으로 사용 중지 되지만 $ enable-negative-margins : true를 설정하여 Sass에서 사용하도록 설정할 수 있습니다.

구문은 기본 양수 margin 유틸리티와 거의 동일하지만 요청 된 크기 앞에 n이 추가됩니다. 다음은 .mt-1과 반대되는 예시 클래스입니다:

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

갭

display: grid 또는 display: flex를 사용할 때 부모 그리드 컨테이너에서 gap 유틸리티를 사용할 수 있습니다. 이렇게 하면 개별 그리드 또는 flex 항목에 여백 유틸리티를 추가할 필요가 없습니다. 간격 유틸리티는 기본적으로 반응형이며 $spacers Sass 맵을 기반으로 유틸리티 API를 통해 생성됩니다.

Grid item 1

Grid item 2

Grid item 3

Grid item 4

html

<div style="grid-template-columns: 1fr 1fr;" class="d-grid gap-3">
  <div class="p-2">Grid item 1</div>
  <div class="p-2">Grid item 2</div>
  <div class="p-2">Grid item 3</div>
  <div class="p-2">Grid item 4</div>
</div>

지원에는 Bootstrap의 모든 그리드 중단점에 대한 반응형 옵션과 $ spacers 맵 (0 – 5)의 6 가지 크기가 포함됩니다. .gap-auto 유틸리티 클래스는 사실상.gap-0과 동일하므로 별도로 없습니다.

row-gap

row-gap은 지정된 컨테이너의 하위 항목 사이의 세로 간격을 설정합니다.

Grid item 1

Grid item 2

Grid item 3

Grid item 4

html

<div style="grid-template-columns: 1fr 1fr;" class="d-grid gap-0 row-gap-3">
  <div class="p-2">Grid item 1</div>
  <div class="p-2">Grid item 2</div>
  <div class="p-2">Grid item 3</div>
  <div class="p-2">Grid item 4</div>
</div>

column-gap

column-gap은 지정된 컨테이너의 하위 항목 사이의 가로 간격을 설정합니다.

Grid item 1

Grid item 2

Grid item 3

Grid item 4

html

<div style="grid-template-columns: 1fr 1fr;" class="d-grid gap-0 column-gap-3">
  <div class="p-2">Grid item 1</div>
  <div class="p-2">Grid item 2</div>
  <div class="p-2">Grid item 3</div>
  <div class="p-2">Grid item 4</div>
</div>

CSS

Sass 맵

간격 유틸리티는 Sass 맵을 통해 선언된 다음 유틸리티 API로 생성됩니다.

scss/_variables.scss

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

Sass 유틸리티 API

간격 유틸리티는 scss/_utilities.scss의 유틸리티 API에 선언되어 있습니다. 유틸리티 API 사용 방법에 대해 알아보세요.

scss/_utilities.scss

"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
),
"row-gap": (
  responsive: true,
  property: row-gap,
  class: row-gap,
  values: $spacers
),
"column-gap": (
  responsive: true,
  property: column-gap,
  class: column-gap,
  values: $spacers
),