브레이크 포인트 관련 문의
258
5 asked
안녕하세요 강사님
<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>
Answer 1
0
안녕하세요.
부트스트랩에서는 sm, 즉 small break 미만으로 과거에는 xs라는 break point가 있어서 col-xs-*로 표시했다가 아마도 부트스트랩4 부터 col-xs-*를 col-*로 통일했습니다.
col-sm-4는 말씀하신대로 스몰 디바이스 이상에서는 4칸씩, 그러니까 컬럼이 총 3개가 되고, 그 미만에서는 12개의 칸을 사용한다는 뜻이 됩니다.
그래서 col-6를 넣지 않으면 xs 의 디바이스에서는 가로폭 전체를 하나로 사용하게 됩니다.
services-col mx-2 my-3
0
62
2
단축키 질문
0
57
1
부트스트랩 + *.css 함께 사용하는 이유와 분리 기준이 궁금합니다.
0
279
2
프로젝트3의 툴팁에서
1
333
2
프로젝트1 번의 Navigation 강의부에서 질문입니다.
0
363
1
게시판을 추가할 수 있는 방법이 있을까요?
0
721
1
프로젝트 2 이미지 깨짐 현상
0
1179
1
프로젝트 1- Service Section 에서 app.js에서 syntaxError가 납니다.
0
287
1
자식에 position:absolute;를 쓰지 않고, 바로 top 설정이 가능한가요?
0
350
2
cdn.js를 실제 프로젝트에 써도 문제가되지 않나요!?
0
529
1
carousel 구현에서 사용된 아이디가 중복 사용 가능한가요?
0
361
1
kakao map이 mobile에서도 가능하게 하려면 어떻게 할까요?
0
307
1
-webkit- 접두어가 안붙습니다.
0
400
1
a:hover {color }
2
455
4
Post Content -2 질문
0
204
1
아니 선생님 이게 뭡니까 프로젝트3 Blog CTA Modal 파트
0
324
2
hover
0
322
1
box 공부중 질문있습니다
0
333
3
뭐가 잘못 된지 모르겠습니다.
0
294
2
강의보고 따라하는데 안됩니다.
0
302
3
3:10 -> 3:16 코드 질문 있습니다^^
0
282
2
card와 card-body 의 차이점
0
677
2
px-md-3
0
377
2
a:hover
0
289
2