[bootstrap] 부트스트랩 그리드 – 동시에 여러개의 그리드 선택자 사용

화면너비	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 부분을 복사해 바로 아래에 붙여 넣고 col-md-4 선택자에 col-lg-4 col-sm-4 선택자를 추가해 보았습니다.

 

웹브라우저의 너비를 줄여서 992px 이하가 되면 첫 번째 .row는 좌우 배열에서 상하 배열로 전환되지만 두 번째 .row는 좌우 배열이 그대로 유지됩니다. 너비를 더 줄여서 767px 이하가 되면 두 번째 .row도 상하 배열로 전환됩니다.