[BootStrap] 부트스트랩 4에서 col-xs-* 클래스가 동작하지 않는 경우

부트스트랩 4 col-xs-* 동작하지 않음

부트스트랩 4에는 기존의 3 버전에 비해 사용법이 많이 달라졌습니다.

부트스트랩의 핵심이라고 볼 수 있는 반응형 웹 디자인의 그리드 시스템(Grid system)에서도 기존의 클래스 선언과는 다른 부분이 존재합니다.

예를 들면 다음 포스트에서도 언급된 visible과 hidden 요소가 있습니다.

부트스트랩은 디바이스의 크기에 따라서 다양한 클래스를 정의할 수 있습니다.

예를 들어 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