Bootstrap 4 및 5에서 Bootstrap의 간격 유틸리티 클래스가 어떻게 변경되었습니까?

Bootstrap에서 간격 유틸리티 클래스를 어떻게 사용합니까?

기사에서 m-b-와 같은 Bootstrap 4 간격 유틸리티 클래스를 접했습니다. lg, React MeteorJS 애플리케이션에서 구현하려고 시도했지만 성공하지 못했습니다. 명확히 하기 위해 Bootstrap의 간격 유틸리티 사용법과 업데이트를 살펴보겠습니다.

Bootstrap 5(베타 2021)

Bootstrap 5에서 RTL 지원을 도입한 이후 왼쪽 및 오른쪽 개념 시작과 끝으로 대체되어 l- 및 r- 간격 유틸리티가 변경되었습니다.

• pl-* = ps-*
• pr-* = pe-*
• ml-* = ms-*
• mr-* = me-*

부트스트랩 4(2020 업데이트)

Bootstrap 4의 간격 유틸리티는 알파 릴리스 이후 발전했습니다. 업데이트된 구문은 다음과 같습니다:

• 여백: m{sides}-{size}
• Padding: p{sides}-{ size}

예:

• mb-2 = 여백 하단 2 간격 단위
• m-0 = 여백 없음
• pt-3 = 상단 패딩 3개 간격 단위
• p-1 = 모든 면 패딩 1개 간격 단위

Bootstrap 4는 부분을 나타내는 6가지 크기(0-5)를 제공합니다. 기본 .5rem 스페이서 장치. 또한 이제 x축(왼쪽/오른쪽) 및 y축(상단/하단) 유틸리티를 지정할 수 있습니다.

• my-2 = 여백 상단 및 하단 2 간격 단위
• mx-0 = 왼쪽 및 오른쪽 여백 없음
• px-3 = 왼쪽 및 오른쪽 패딩 3개 간격 단위

또한 이러한 간격 유틸리티는 가장 작은 중단점(xs)으로 반응합니다. ) 중단점이 지정되지 않은 경우 암시됨:

• mt-md-2 = 여백 상단 2 간격 단위, md(이상)
• py-sm-0 = 상단 패딩 없음 & 하단, sm(이상)

위 내용은 Bootstrap 4 및 5에서 Bootstrap의 간격 유틸리티 클래스가 어떻게 변경되었습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!