부트스트랩에서 간격 유틸리티 클래스 사용

부트스트랩에서 간격 유틸리티 클래스를 사용하면 요소 주위의 간격을 쉽게 제어할 수 있습니다. 그러나 이를 사용하는 데 문제가 발생하는 경우 도움이 되는 가이드가 있습니다.

업데이트된 간격 구문(Bootstrap 4 및 5)

Bootstrap 4에서는 간격 유틸리티 클래스에 대한 단순화된 구문:

여백:
m{sides}-{size}

Padding:
p {sides}-{size}

예:
mb-2 = 여백 하단 2 간격 단위
p-1 = 모든 측면 패딩 1 간격 단위

Bootstrap 5 포함 RTL 지원으로 인해 방향별 접두사가 변경됩니다.

*pl-* = ps-*(시작)
*pr-* = pe-*(끝)
*ml- * = ms-* (시작)
*mr-* = me-* (끝)

반응형 간격

이제 특정 중단점에 간격을 적용할 수 있습니다. 다음 구문을 사용합니다.

여백:
m{sides}-{중단점}-{크기}

패딩:
p{sides}-{breakpoint}-{size}

예:
mt-md-2 = 중간 화면 이상에서 상단 2개 간격 단위 여백

React를 사용하는 MeteorJS의 예

React와 함께 MeteorJS를 사용하는 경우 bootstrap-spacer 패키지가 설치되어 있는지 확인하세요.

meteor npm install bootstrap-spacer

그런 다음 공백 유틸리티 클래스를 구성 요소로 가져옵니다.

import { spacers } from "bootstrap-spacer";

표준 HTML에서와 마찬가지로 유틸리티 클래스를 사용합니다.

  ...

문제 해결

• 간격 클래스가 작동하지 않는 경우 bootstrap-spacer 패키지가 설치되어 구성 요소로 가져왔는지 확인하세요.
• 사용 중인 클래스 이름이 업데이트된 구문과 일치하는지 확인하세요.
• 추가 정보와 예시는 관련 문서를 확인하세요.