부트스트랩 그리드 예제

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

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 3 그리드 시스템에는 xs(전화), sm(태블릿), md(데스크톱) 및 lg(대형 데스크톱)의 4가지 등급이 있습니다. 이러한 클래스의 거의 모든 조합을 사용하여 보다 동적이고 유연한 레이아웃을 만들 수 있습니다.

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

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

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

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

열 지우기

콘텐츠가 고르지 않은 어색한 래핑을 방지하기 위해 특정 중단점에서 플로트 를 지웁니다.

.col-xs-6 .col-sm-3
뷰포트의 크기를 조정하거나 예를 들어 휴대전화에서 확인하세요.
.col-xs-6 .col-sm-3
.col-xs-6 .col-sm-3
.col-xs-6 .col-sm-3

오프셋, 푸시 및 풀 리셋

특정 중단점에서 오프셋, 푸시 및 풀을 재설정합니다.

.col-sm-5 .col-md-6
.col-sm-5 .col-sm-offset-2 .col-md-6 .col-md-offset-0
.col-sm-6 .col-md-5 .col-lg-6
.col-sm-6 .col-md-5 .col-md-offset-2 .col-lg-6 .col-lg-offset-0