레이아웃 유틸리티

바꾸다display

속성 의 공통 값을 반응적으로 토글 하려면 디스플레이 유틸리티 를 사용하십시오. display그리드 시스템, 콘텐츠 또는 구성 요소와 혼합하여 특정 뷰포트에서 표시하거나 숨길 수 있습니다.

플렉스박스 옵션

부트스트랩은 flexbox로 구축되었지만 불필요한 재정의가 많이 추가되고 주요 브라우저 동작이 예기치 않게 변경되므로 모든 요소 display가 로 변경 되지는 않았습니다. display: flex대부분의 구성 요소 는 flexbox가 활성화된 상태로 제작되었습니다.

display: flex요소 에 추가해야 하는 .d-flex경우 반응형 변형(예: .d-sm-flex) 중 하나를 사용하여 추가하세요. 크기 조정, 정렬, 간격 등에 대한 추가 flexbox 유틸리티display 를 사용 하려면 이 클래스 또는 값이 필요합니다 .

여백 및 패딩

margin및 padding 간격 유틸리티 를 사용하여 요소와 구성요소의 간격과 크기를 제어합니다. 부트스트랩에는 1rem값 기본 $spacer변수를 기반으로 하는 간격 유틸리티에 대한 6단계 척도가 포함되어 있습니다. 모든 뷰포트에 대한 값을 선택하거나(예: .me-3LTR margin-right: 1rem에서) 반응형 변형을 선택하여 특정 뷰포트를 대상으로 합니다(예: .me-md-3-LTR margin-right: 1rem에서 md중단점에서 시작).

비녀장visibility

토글 이 필요하지 않은 경우 가시성 유틸리티 를 사용하여 요소를 display토글할 수 있습니다 . 보이지 않는 요소는 여전히 페이지 레이아웃에 영향을 미치지만 방문자에게 시각적으로 숨겨집니다.visibility