JooTC부트스트랩 4 col-xs-* 동작하지 않음
부트스트랩 4에는 기존의 3 버전에 비해 사용법이 많이 달라졌습니다.
부트스트랩의 핵심이라고 볼 수 있는 반응형 웹 디자인의 그리드 시스템(Grid system)에서도 기존의 클래스 선언과는 다른 부분이 존재합니다.
예를 들면 다음 포스트에서도 언급된 visible과 hidden 요소가 있습니다.
부트스트랩은 디바이스의 크기에 따라서 다양한 클래스를 정의할 수 있습니다.
| 장치 | 실제 크기 | 컨테이너 크기 | 클래스 | 클래스 (row) |
|---|---|---|---|---|
| Extra Small | < 576 px | xs | .col- | |
| Small | >=576 px | 540px | sm | .col-sm- |
| Medium | >= 768 px | 720px | md | .col-md- |
| Large | >= 992 px | 960px | lg | .col-lg- |
| Extra Large | >= 1200 px | 1140px | xl | .col-xl- |
예를 들어 Medium(md) 크기의 디바이스에서 지정된 비율의 크기를 보여주고 싶은 경우, col-md-3 이나 col-md-6 과 같이 사용할 수 있습니다.
부트스트랩 4에서 변동된 사항은 Extra Small(xs) 크기의 디바이스에 대한 클래스 정의뿐입니다.
예를 들어 부트스트랩 3에서 기존에 다음과 같이 입력된 내용이 있다고 가정해보겠습니다.
.col-xs-1 .col-xs-2 .col-xs-3 .col-xs-4 .col-xs-5 .col-xs-6 .col-xs-7 .col-xs-8 .col-xs-9 .col-xs-10 .col-xs-11 .col-xs-12
4 버전 이상부터는 이렇게 사용되어야 합니다.
.col-1 .col-2 .col-3 .col-4 .col-5 .col-6 .col-7 .col-8 .col-9 .col-10 .col-11 .col-12
참고 문서
- BootStrap 4 Grid system : http://getbootstrap.com/docs/4.1/layout/grid/
- ‘col-xs-*’ not working in Bootstrap 4 : https://stackoverflow.com/questions/41794746/col-xs-not-working-in-bootstrap-4
