[grid] BS3 - Grid (.container / .container-fluid) - 그리드 (박스형/와이드형)

목차

1. BS3 Grid 시스템
2. .container 클래스 - box형 (= 고정너비)
3. .container-fluid 클래스 - wide형 (= 전체너비)

 

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가 되도록 배치.

※ 분기점 미만 : 수직정렬.

※ 분기점 이상 : 수평정렬.

 

.container 클래스 - box형 (= 고정너비)

(sm 미만 수직) → (sm 이상 box형 6:6)

 

<div class="container">  

    <div class="row">

        <div class="col-sm-6">...</div>

        <div class="col-sm-6">...</div>

    </div>

</div>

결과 보기

 

.container-fluid 클래스 - wide형 (= 전체너비)

(sm 미만 수직) → (sm 이상 wide형 6:6)

 

<div class="container-fluid">

    <div class="row">

        <div class="col-sm-6">...</div>

        <div class="col-sm-6">...</div>

    </div>

</div>

 

결과 보기