간격

부트스트랩에는 요소의 모양을 수정하기 위한 다양한 속기 응답 여백, 패딩 및 간격 유틸리티 클래스가 포함되어 있습니다.

이 페이지에서

여백 및 패딩

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

CSS 그리드 레이아웃 모듈을 사용 중이신가요? 대신 gap 유틸리티 를 사용 하는 것이 좋습니다.

표기법

모든 중단점에 적용되는 간격 유틸리티 from xsto xxl에는 중단점 약어가 없습니다. 이는 해당 클래스가 이후부터 적용되어 min-width: 0미디어 쿼리에 구속되지 않기 때문입니다. 그러나 나머지 중단점에는 중단점 약어가 포함됩니다.

클래스의 이름은 , , , 및 에 대한 형식 {property}{sides}-{size}을 사용하여 지정됩니다 .xs{property}{sides}-{breakpoint}-{size}smmdlgxlxxl

속성 이 다음 중 하나인 경우 :

m- 설정하는 클래스의 경우margin
p- 설정하는 클래스의 경우padding

측면 은 다음 중 하나입니다.

t- 설정 margin-top하거나padding-top
b- 설정 margin-bottom하거나padding-bottom
s- (시작) LTR margin-left또는 RTL 을 설정하는 클래스의 경우padding-leftmargin-rightpadding-right
e- (끝) 설정 margin-right또는 padding-rightLTR margin-left또는 padding-leftRTL 에 있는 클래스의 경우
x*-left- 및 둘 다 설정하는 클래스 의 경우*-right
y*-top- 및 둘 다 설정하는 클래스 의 경우*-bottom
공백 - 요소의 4면 모두에 또는를 margin설정 하는 클래스 의 경우padding

여기서 크기 는 다음 중 하나입니다.

0margin- 제거 하거나 다음 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
automargin- auto 로 설정된 클래스의 경우

$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: blockwidthauto

중앙 요소

<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의 자식)에 여백 유틸리티를 추가해야 하는 번거로움을 줄일 수 있습니다 . Gap 유틸리티는 기본적으로 응답하며 Sass 맵 display: grid을 기반으로 하는 유틸리티 API를 통해 생성 됩니다.$spacers

그리드 항목 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>

지원에는 부트스트랩의 모든 그리드 중단점에 대한 응답 옵션과 $spacers맵의 6가지 크기( 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
    ),