부트스트랩 그리드 예제

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

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

5개의 그리드 계층

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

.col-4

.col-sm-4

.col-md-4

.col-lg-4

.col-xl-4

.col-xxl-4

3개의 동일한 열

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

.col-md-4

3개의 동일한 열 대안

클래스 를 사용하면 .row-cols-*동일한 열로 그리드를 쉽게 만들 수 있습니다.

.col의 아이 .row-cols-md-3

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-4

혼합: 모바일 및 데스크톱

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

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

.col-md-8

.col-6 .col-md-4

.col-6

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

.col-sm-6 .col-lg-8

.col-6 .col-lg-4

.col-6 .col-sm-4

거터

클래스를 사용 .gx-*하여 수평 거터를 조정할 수 있습니다.

.col배수로 .gx-4포함

클래스를 사용 .gy-*하여 수직 거터를 제어합니다.

.col배수로 .gy-4포함

클래스를 사용하면 .g-*양방향의 거터를 조정할 수 있습니다.

.col배수로 .g-3포함

컨테이너

Bootstrap v4.4에 추가된 추가 클래스는 특정 중단점까지 너비가 100%인 컨테이너를 허용합니다. v5는 새로운 xxl중단점을 추가합니다.

.컨테이너

.container-sm

.container-md

.container-lg

.container-xl

.container-xxl

.용기 유체