간격

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

작동 방식

약식 클래스를 사용하여 요소 또는 측면의 하위 집합에 반응형 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>

마이너스 마진

CSS에서 margin속성은 음수 값을 사용할 수 있습니다( padding할 수 없음). 4.2부터 위에 나열된 모든 0이 아닌 정수 크기에 대해 음수 마진 유틸리티를 추가했습니다(예: , 1, , ) . 이러한 유틸리티는 중단점에서 그리드 열 거터를 사용자 지정하는 데 이상적입니다.2345

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

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

다음은 중간( md) 중단점 이상에서 부트스트랩 그리드를 사용자 지정하는 예입니다. .col로 패딩을 늘린 다음 부모 에서 .px-md-5이를 상쇄했습니다 ..mx-md-n5.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>