[bootstrap] 부트스트랩 그리드 – 컬럼 네스팅(Column Nesting)

화면너비	768px 미만	768px 이상	992px 이상	1200px 이상
그리드 배열	항상 가로배열	가로 배열에서 위 수치에 이르면 세로 배열로 전환
.container 너비	없음 (항상 화면 전체너비)	750px	970px	1170px
클래스 선택자 접두어	.col-xs- (xs: extra small)	.col-sm- (sm: small)	.col-md- (md: medium)	.col-lg- (lg: large)
거터(그리드 사이 여백) 크기	30px, 그리드 좌우측 15px 패딩

 

이번에는 .row 부분을 복사해서 첫 번째 그리드의 콘텐츠를 지우고 붙여넣었습니다.
이렇게 내부에 레이아웃을 추가로 만들려면 .row가 있는 태그도 추가해야 합니다.

부모 그리드의 숫자가 8인데, 작식 그리드의 숫자의 합이 12가 되고 있는데요.
어떻게 보면 8보다 12가 크니까 레이아웃을 벗어날 것이라 생각할수도 있지만, 그리드의 너비는 항상 부모를 기준으로 퍼센트로 계산되기 때문에 문제가 없습니다.

 

<div class=”col-md-8 col-lg-8 col-sm-8“>
<div class=”row“>
<div class=”col-md-8 col-lg-8 col-sm-8“>…</div>
<div class=”col-md-4 col-lg-4 col-sm-4“>…</div>
</div>
</div>

 

즉,  부모 그리드 col-md-8의 너비는 .container 영역의 2/3를 차지하게 되며 자식 그리드의 .row는 이 너비의 100%를 사용하고 다시 이 내부의 .col-md-8은 이 영역의 2/3를 사용하게 됩니다.

이러한 그리드의 너비는 부트스트랩 스타일시트에 정의 돼 있습니다.