• 카테고리

    질문 & 답변
  • 세부 분야

    프론트엔드

  • 해결 여부

    미해결

브레이크 포인트 관련 문의

22.11.12 16:39 작성 조회수 137

0

안녕하세요 강사님

<div class="row">
      <div class="col-6 col-sm-4">1</div>
      <div class="col-6 col-sm-4">2</div>      
      <div class="col-6 col-sm-4">3</div>
      <div class="col-6 col-sm-4">4</div>
    </div>

위의 첫번째 컬럼을 해석할때

컬럼을 기본값으로 6칸으로 설정하되 sm 이상일때는 컬럼을 4칸으로 설정해라 이게 맞나요? 이럴 경우에는 컬럼 6칸을 잡은것은 의미가 없는것 같아서 여쭤봅니다.

아니면 컬럼을 기본값으로 6칸을 설정하되 sm일 경우에만 컬럼을 4개로 설정해라 라는 의미인가요? 이 경우에는 xl 크기로 움직이면 두개의 row에 각각 2개의 컬럼이 나올것으로 예상했는데 한개의 row에 3개의 컬럼, 그리고 아래 row에 한개의 컬럼이 결과적으로 나옵니다. col 값이 6이면 한개의 줄에 3개가 나올수 없을텐데 이유를 잘 모르겠습니다.

<div class="col-6 col-sm-4">1</div>

답변 1

답변을 작성해보세요.

0

안녕하세요.

부트스트랩에서는 sm, 즉 small break 미만으로 과거에는 xs라는 break point가 있어서 col-xs-*로 표시했다가 아마도 부트스트랩4 부터 col-xs-*를 col-*로 통일했습니다.

col-sm-4는 말씀하신대로 스몰 디바이스 이상에서는 4칸씩, 그러니까 컬럼이 총 3개가 되고, 그 미만에서는 12개의 칸을 사용한다는 뜻이 됩니다.

그래서 col-6를 넣지 않으면 xs 의 디바이스에서는 가로폭 전체를 하나로 사용하게 됩니다.