간격

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

작동 방식

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