[bootstrap] 부트스트랩 그리드

부트스트랩은 12열의 그리드 시스템을 사용합니다.
그리드의 사이즈는 입력한 클래스의 선택자에 따라 달라집니다.

화면너비	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 패딩

 

가장 상위에 .container 선택자가, 그 바로 하위에 .row 선택자가,  그 다음 하위에 그리드를 만들기 위한 선택자가 와야 합니다. 이러한 규칙을 지키지 않으면 그리드가 레이아웃을 벗어나게 됩니다.

12열을 사용하므로 그리드 선택자에서 사용한 숫자의 합이 12가 되면 되는데, 그 보다 크면 마지막 그리드가 하단으로 내려가서 배치됩니다. 여기에서는 .col-md-4를 3개 사용해서 합이 12되도록 했습니다.

 

이러한 원리를 알면 원하는 그리드를 선택자를 이용해서 사용하실 수 있습니다.