INIDOG
bootstrap-4-logo-card

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

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


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

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

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

부트스트랩 4 브라우저 크기별 요소 가리기/보이기 (hidden, visible)

 

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

장치실제 크기컨테이너 크기클래스클래스 (row)
Extra Small< 576 pxxs.col-
Small>=576 px540pxsm.col-sm-
Medium>= 768 px720pxmd.col-md-
Large>= 992 px960pxlg.col-lg-
Extra Large>= 1200 px1140pxxl.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

 

 

참고 문서


이 글에 대해 어떻게 생각하시나요?
유용한 포스트였나요? 여러분의 의견을 하단의 Vote와 댓글로 남겨주세요 🙂
유용합니다!
아쉽습니다.

여러분의 의견을 댓글로 남겨주세요.

avatar
error: