간격
부트스트랩에는 요소의 모양을 수정하기 위한 다양한 속기 응답 여백 및 패딩 유틸리티 클래스가 포함되어 있습니다.
작동 방식
약식 클래스를 사용하여 요소 또는 측면의 하위 집합에 반응형 margin
또는 값을 할당합니다 . padding
개별 속성, 모든 속성, 수직 및 수평 속성에 대한 지원을 포함합니다. 클래스는 에서 에 이르는 기본 Sass 맵에서 빌드 .25rem
됩니다 3rem
.
표기법
모든 중단점에 적용되는 간격 유틸리티 from xs
to xl
에는 중단점 약어가 없습니다. 이는 해당 클래스가 이후부터 적용되어 min-width: 0
미디어 쿼리에 구속되지 않기 때문입니다. 그러나 나머지 중단점에는 중단점 약어가 포함됩니다.
클래스의 이름은 , , 및 에 대한 형식 {property}{sides}-{size}
을 사용하여 지정됩니다 .xs
{property}{sides}-{breakpoint}-{size}
sm
md
lg
xl
속성 이 다음 중 하나인 경우 :
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
여기서 크기 는 다음 중 하나입니다.
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
- 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: block
width
auto
<div class="mx-auto" style="width: 200px;">
Centered element
</div>
마이너스 마진
CSS에서 margin
속성은 음수 값을 사용할 수 있습니다( padding
할 수 없음). 4.2부터 위에 나열된 모든 0이 아닌 정수 크기에 대해 음수 마진 유틸리티를 추가했습니다(예: , 1
, , ) . 이러한 유틸리티는 중단점에서 그리드 열 거터를 사용자 지정하는 데 이상적입니다.2
3
4
5
구문은 기본 양수 여백 유틸리티와 거의 동일하지만 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>