부트스트랩 그리드 예제

아래에서 기본 부트스트랩 그리드 레이아웃의 몇 가지 예를 수집했습니다.

3개의 동일한 열

.col-sm-4

다음 예는 태블릿에서 시작하여 대형 데스크탑으로 확장되는 3개의 동일한 너비 열을 얻는 방법을 보여줍니다. 휴대전화에서는 열이 자동으로 누적됩니다.

예시

3개의 같지 않은 열

.col-sm-3

.col-sm-6

.col-sm-3

다음 예는 태블릿에서 시작하여 대형 데스크탑으로 확장되는 3개의 다양한 너비 열을 얻는 방법을 보여줍니다.

예시

두 개의 같지 않은 열

.col-sm-4

.col-sm-8

다음 예는 태블릿에서 시작하여 대형 데스크탑으로 확장되는 두 개의 다양한 너비 열을 가져오는 방법을 보여줍니다.

예시

거터 없음

.col-sm-4

.col-sm-8

클래스를 사용하여 .row-no-gutters행과 열에서 거터를 제거합니다.

예시

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

다음 예는 태블릿에서 시작하여 큰 데스크톱으로 확장하는 두 개의 열을 가져오는 방법을 보여줍니다. 더 큰 열 내에 다른 두 개의 열(동일한 너비)이 있습니다(휴대폰에서는 이러한 열과 중첩된 열이 누적됨).

예시

혼합: 모바일 및 데스크탑

부트스트랩 그리드 시스템에는 xs(전화), sm(태블릿), md(데스크톱) 및 lg(대형 데스크톱)의 4가지 클래스가 있습니다. 클래스를 결합하여 보다 동적이고 유연한 레이아웃을 만들 수 있습니다.

팁: 각 클래스가 확장되므로 xs 및 sm에 대해 동일한 너비를 설정하려면 xs만 지정하면 됩니다.

예시

팁: 그리드 열은 행에 대해 최대 12개까지 추가되어야 함을 기억하십시오. 그 이상으로 열은 뷰포트에 관계없이 쌓입니다.

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

예시

수레 지우기

.clearfix콘텐츠가 고르지 않은 이상한 래핑을 방지하기 위해 특정 중단점에서 부동 소수점( 클래스 포함)을 지우십시오.

예시

<div class="row">
<div class="col-xs-6 col-sm-3">
    Column 1
    <br>
    Resize the browser window to see the effect.
</div>
<div class="col-xs-6 col-sm-3">Column 2</div>

<div class="clearfix visible-xs"></div>
<div class="col-xs-6 col-sm-3">Column 3</div>
<div class="col-xs-6 col-sm-3">Column 4</div>
</div>

오프셋 열

.col-md-offset-*클래스 를 사용하여 열을 오른쪽으로 이동합니다 . 이 클래스는 열의 왼쪽 여백을 * 열만큼 늘립니다.

예시

푸시 앤 풀 - 열 순서 변경

.col-md-push-*및 .col-md-pull-*클래스 를 사용하여 그리드 열의 순서를 변경합니다 .

예시

❮ 이전의 다음 ❯

부트스트랩 3 튜토리얼