| 화면너비 | 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 패딩 | |||
스마트폰처럼 좁은 화면에서는 모든 그리드가 좌우로 배열되면 폭이 너무 좁습니다. 그래서 마지막 .col-xs-6 의 총 합이 12가 넘게해서 마지막 그리드는 아래로 내려오게해서 폭을 넓게 사용할 수 있습니다.
다른 크기의 너비에서는 모두 좌우로 배열되므로 문제될 게 없습니다.
'프로그래밍 언어 > 부트스트랩(Bootstrap)' 카테고리의 다른 글
| [bootstrap] 부트스트랩 그리드 – 전체폭 레이아웃 (0) | 2016.01.15 |
|---|---|
| [bootstrap] 부트스트랩 그리드 – 컬럼 오프셋(Column Offset) (0) | 2016.01.15 |
| [bootstrap] 부트스트랩 그리드 (0) | 2016.01.15 |
| [bootstrap] 부트스트랩 그리드 – 컬럼 네스팅(Column Nesting) (0) | 2016.01.15 |
| [bootstrap] 부트스트랩 그리드 – 그리드를 밀고 당기는 선택자 사용하기 (0) | 2016.01.15 |
댓글