Member Guide

아미나빌드 멤버 가이드

홈 > 회원포럼 > 회원가이드
회원가이드

col-sm , col-mb 기능 이해

18 네이투 21 3343 7

64b83cce94df4dda33d81ad2377f57d9_1468101102_8774.jpg

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

 

 

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

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

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

 

 

 

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

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

 

변경 시 아래 스샷 참조

64b83cce94df4dda33d81ad2377f57d9_1468101430_6843.jpg
 

 

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

 

<div class="col-sm-4"> 내용 </div> 

<div class="col-sm-4"> 내용 </div> 

<div class="col-sm-4"> 내용 </div> 

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

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

 

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

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

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

 

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

 

 

 

 

21 Comments
1 그레윈 2017.11.25 17:24  
mb 하고 md 하고 다른건가요?
8 자자자 01.22 06:29  
extra small - xs
small - sm
medium - md
large - lg

mb 는 없어여 ^^
7 막심 2017.12.18 20:13  
이거 찾았는데 ,여기 있었군요 ,,감사합니다 .
3 jedi 2017.12.28 22:55  
좋은 정보 감사합니다.
6 그루터기 01.11 12:56  
메인화면 수정하면서 엄청 궁금하고 어려운 부분이었는데..감사합니다.^^*
3 커피캣츠웰 07.04 13:03  
감사합니다.
최근 글
최근 댓글
Facebook Twitter GooglePlus KakaoStory NaverBand