부트스트랩 그리드 예제

부트스트랩 그리드 시스템 내에서 구축하는 데 익숙해지는 기본 그리드 레이아웃.

5개의 그리드 계층

Bootstrap 그리드 시스템에는 지원하는 각 장치 범위에 대해 하나씩 5개의 계층이 있습니다. 각 계층은 최소 표시 영역 크기에서 시작하고 재정의되지 않는 한 더 큰 장치에 자동으로 적용됩니다.

.col-4
.col-4
.col-4
.col-sm-4
.col-sm-4
.col-sm-4
.col-md-4
.col-md-4
.col-md-4
.col-lg-4
.col-lg-4
.col-lg-4
.col-xl-4
.col-xl-4
.col-xl-4

3개의 동일한 열

데스크톱에서 시작하여 큰 데스크톱으로 확장되는 3개의 동일한 너비 열 을 가져옵니다 . 모바일 장치, 태블릿 및 그 이하에서는 열이 자동으로 누적됩니다.

.col-md-4
.col-md-4
.col-md-4

3개의 같지 않은 열

데스크탑에서 시작하여 다양한 너비의 대형 데스크탑으로 확장되는 3개의 열을 얻으십시오 . 그리드 열은 단일 수평 블록에 대해 최대 12개까지 추가해야 합니다. 그 이상이면 뷰포트에 관계없이 열이 쌓이기 시작합니다.

.col-md-3
.col-md-6
.col-md-3

두 개의 열

데스크탑에서 시작하여 대형 데스크탑으로 확장되는 두 개의 열을 얻으십시오 .

.col-md-8
.col-md-4

전체 너비, 단일 열

전체 너비 요소에는 그리드 클래스가 필요하지 않습니다.

두 개의 중첩 열이 있는 두 개의 열

문서에 따르면 중첩은 쉽습니다. 기존 열 안에 열 행을 넣으면 됩니다. 이렇게 하면 데스크톱에서 시작하여 큰 데스크톱으로 확장되는 두 개의 열이 제공 되며, 더 큰 열 내에 다른 두 개(동일한 너비)가 있습니다.

모바일 장치 크기, 태블릿 및 그 이하에서는 이러한 열과 중첩 열이 누적됩니다.

.col-md-8
.col-md-6
.col-md-6
.col-md-4

혼합: 모바일 및 데스크톱

Bootstrap v4 그리드 시스템에는 xs(초소형), sm(소형), md(중형), lg(대형) 및 xl(초대형)의 5가지 클래스 계층이 있습니다. 이러한 클래스의 거의 모든 조합을 사용하여 보다 동적이고 유연한 레이아웃을 만들 수 있습니다.

클래스의 각 계층은 확장됩니다. 즉, xs 및 sm에 대해 동일한 너비를 설정하려는 경우 xs만 지정하면 됩니다.

.col-12 .col-md-8
.col-6 .col-md-4
.col-6 .col-md-4
.col-6 .col-md-4
.col-6 .col-md-4
.col-6
.col-6

혼합: 모바일, 태블릿, 데스크톱

.col-12 .col-sm-6 .col-lg-8
.col-6 .col-lg-4
.col-6 .col-sm-4
.col-6 .col-sm-4
.col-6 .col-sm-4