간격

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

작동 방식

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

표기법

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

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

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

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
공백 - 요소의 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;
}

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

중앙 요소

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