부트스트랩 그리드 예제

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

이 예에서 .themed-grid-col클래스는 일부 테마를 추가하기 위해 열에 추가됩니다. 이것은 기본적으로 Bootstrap에서 사용할 수 있는 클래스가 아닙니다.

5개의 그리드 계층

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

.col-4

.col-sm-4

.col-md-4

.col-lg-4

.col-xl-4

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

.col-md-4

데스크탑에서 시작하여 다양한 너비의 대형 데스크탑으로 확장되는 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-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-12 .col-sm-6 .col-lg-8

.col-6 .col-lg-4

.col-6 .col-sm-4