BS3 Grid
Extra Small
Small
Medium
Large
Class 접두어
.col-xs
.col-sm
.col-md
.col-lg
화면 너비
<768
>=768
>=992px
>=1200px
※ .container (또는, .container-fluid) > .row > .col~ 구조가 되도록 요소 배치.
※ .row (행) 안의 .column (열) 개수 합이 12가 되도록 배치.
※ 분기점 미만 : 수직정렬.
※ 분기점 이상 : 수평정렬.
Three Equal Columns (3등분 동일 너비 )
<div class="row">
<div class="col-sm-4">...</div>
<div class="col-sm-4">...</div>
<div class="col-sm-4">...</div>
</div>
Three Unequal Columns (3등분 다른 너비 )
<div class="row">
<div class="col-sm-3">...</div>
<div class="col-sm-6">...</div>
<div class="col-sm-3">...</div>
</div>
Two Unequal Columns (2등분 다른 너비 )
<div class="row">
<div class="col-sm-4">...</div>
<div class="col-sm-8">...</div>
</div>
No gutters (Gutter 제거 ) ★
<div class="row row-no-gutters ">
<div class="col-sm-3">...</div>
<div class="col-sm-6">...</div>
<div class="col-sm-3">...</div>
</div>
예제보기
PS. GUTTER : 컬럼 사이 간격.
Nested Columns (중첩구조 )
<div class="row">
<div class="col-sm-8">...
<div class="row">
<div class="col-sm-6">...</div>
<div class="col-sm-6">...</div>
</div>
</div>
<div class="col-sm-4">...</div>
</div>
예제보기
Mix and Match (여러 분기점 ) - xs・md
<div class="row">
<div class="col-xs-9 col-md-7 ">...</div>
<div class="col-xs-3 col-md-5 ">...</div>
</div>
<div class="row">
<div class="col-xs-6 col-md-10 ">...</div>
<div class="col-xs-6 col-md-2 ">...</div>
</div>
<div class="row">
<div class="col-xs-6 ">...</div>
<div class="col-xs-6 ">...</div>
</div>
예제보기
Mix and Match (여러분기점 ) - xs・sm・lg
<div class="row">
<div class="col-xs-7 col-sm-6 col-lg-8 ">...</div>
<div class="col-xs-5 col-sm-6 col-lg-4 ">...</div>
</div>
<div class="row">
<div class="col-xs-6 col-sm-8 col-lg-10 ">...</div>
<div class="col-xs-6 col-sm-4 col-lg-2 ">...</div>
</div>
예제보기
BS Grid 예제 - clearfix (줄바꿈 ) ★★
<div class="row">
<div class="col-xs-6 col-sm-3">...</div>
<div class="col-xs-6 col-sm-3">...</div>
<!-- 필요한 viewport에 대해서만 clearfix 추가 -->
<div class="clearfix visible-xs"></div>
<div class="col-xs-6 col-sm-3">...</div>
<div class="col-xs-6 col-sm-3">...</div>
</div>
예제보기
Offsetting Columns (열 맞춤 ) ★★
<div class="row">
<div class="col-sm-5 col-md-6">...</div>
<div class="col-sm-5 col-sm-offset-2 col-md-6 col-md-offset-0 ">...</div>
</div>
예제보기
※ .col-sm-offset-* 클래스 사용해 열 왼쪽 여백을 * 열만큼 증가시켜, 해당 열만큼 우측으로 이동시킴.
Push And Pull - Change Column Ordering (Column 순서 변경 )★★★
<div class="row">
<div class="col-sm-4 col-sm-push-8 ">...</div>
<div class="col-sm-8 col-sm-pull-4 ">...</div>
</div>
예제보기
