레이아웃 유틸리티

모바일 친화적이고 반응이 빠른 개발을 위해 Bootstrap에는 콘텐츠 표시, 숨기기, 정렬 및 간격두기를 위한 수십 가지 유틸리티 클래스가 포함되어 있습니다.

바꾸다display

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

플렉스박스 옵션

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

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

여백 및 패딩

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

비녀장visibility

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