> 웹 프론트엔드 > CSS 튜토리얼 > Bootstrap 4 및 5에서 Bootstrap의 간격 유틸리티 클래스가 어떻게 변경되었습니까?

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

Patricia Arquette
풀어 주다: 2024-10-28 07:35:02
원래의
1041명이 탐색했습니다.

How Have Bootstrap's Spacing Utility Classes Changed in Bootstrap 4 and 5?

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿