부트스트랩 col-md 질문

[규리]

<div className="row">
<div className="col-md-6">
</div>
<div className="col-md-6 mt-4">
</div>
</div>

col-md-6으로 설정해서 모니터상에서 각각 반절씩 차지하는건 알겠는데
스마트폰 사이즈에서는 어떻게 row 한줄씩 자동으로 채워지는건지 궁금합니다!

[codingapple]

그냥 부트스트랩이 제공하는 간편한 class명입니다

row라고 쓰면 내부를 12개의 세로줄로 쪼개줍니다 

col-6이라고 쓰면 그 div는 12개 중 6만큼을 차지합니다.

col-4라고 쓰면 그 div는 12개 중 4만큼을 차지합니다.

col-md-6 이라고 쓰면 브라우저 폭이 미들사이즈보다 클 때만 6개의 세로줄을 차지하게 해줍니다. (아마 768픽셀 정도일걸요)

 

md말고 lg sm 사이즈도 있습니다 

 

[규리]

네 그런데 위에 코드는 각 6만큼 반반씩 차지하는 코드인데 모바일 사이즈로 줄어들면 한줄 다 차게 되잖아요..?<br />
따로 col-xs-12 해준것도 아닌데 어떻게 자동으로 모바일에서는 한줄 꽉차게 되는지가 궁금합니다

[codingapple]

col-md-6은 브라우저 폭이 md 사이즈보다 클 때만 6개의 세로줄을 차지하게 해주고

md보다 크지않으면 자동으로 그 div를 display block, width 100%해줍니다 원래 그래얌 

아마 부트스트랩 css파일 까보시면 

.col-md-6 {
  width : 100%
}

@media screen 어쩌구 (768px보다 크면) {
   .col-md-6 { width : 50% }
} 

대충 이런 식일겁니다 

[규리]

아하 ㅎㅎㅎ 감사합니당!

[글쓴이]

글