col-sm , col-mb 기능 이해

위 두개의 위젯 폼을 하나로 하고자 할때

또는 반대로 하나로 되어 있던 폼을 두개로 하고자 할때 응용 방법

아래 스샷처럼 <div class="col-sm-6"> 은 12의 절반 기준을 합니다.

<div class="col-sm-12">일 경우에는 하나가 표시가 됩니다.

단, <div class="col-sm-6"> 내용 </div> 로 구성 되는 점을 알아 두시어야 합니다.

아래 스샷처럼 <div class="col-sm-12"> 로 변경을 한 후 아래

<div class="col-sm-6"> 내용 </div> 는 삭제를 하시면 하나의 위젯 폼으로 최신글이 됩니다.

변경 시 아래 스샷 참조

<div class="col-sm-6"> 이란 부분의 경우

위와 같이 할 경우 지정된 곳에 3개의 위젯 폼이 됩니다.

최대 12를 기준으로 나눈다고 생각 하시면 됩니다.

아미나 베이직 기본테마의 메인의 경우

좌측 <div class="col-md-9"> 내용 </div>

우측 <div class="col-md-3"> 내용 </div> 의 크기로 기본 되어 있습니다.

이런 식으로 위 함수를 이용하여 다양하게 연출이 가능 합니다.

질문: 설명 감사합니다. 근데, col-sm , col-mb 차이는 뭔가요?

답변: 저도 아직 이해는 다 못했구요...

col-mb 가 대라고 하면 col-sm이 중이라고 해야 할듯....

대에는 패딩값이 없다고 치면 중에는 패딩값이 있구요...

xs/sm/md/lg 각각 해상도 값을 담고 있는걸로 압니다.

각각의 해상도 이상에서 지정한 레이아웃을 유지시키는 거죠.

</div>

======================================

</div>

========================================

</div>

=============================================

</div>

위 네 가지 경우를 놓고 PC창을 줄여보면 차이를 알 수 있어요.

lg의 경우 PC창을 조금만 줄여도 lg-6 값이 금방 아래로 떨어지는 반면

xs의 경우 PC창을 최소한으로 줄이는 동안에도 레이아웃이 유지돼요.

col-xs- (매우 작은 기기 모바일폰 (<768px))

col-sm- (작은 기기 태블릿 (≥768px))

col-md- (중간 기기 데스크탑 (≥992px))

col-lg-(큰 기기 데스크탑 (≥1200px))

참고: http://bootstrapk.com/css/#grid

게시글의 출처는 : http://amina.co.kr/bbs/board.php?bo_table=guide_member&wr_id=8&page=2 입니다.

게시자는 네이투님 입니다.