Tip & Tech

활용팁

홈 > 회원포럼 > 활용팁
활용팁

col-md 활용팁

3 RIDDLE 7 230 5 0

그누보드/아미나를 사용하시는 분이라면 col-md를 사용하는 법은 알고 계실텐데요.


사이트를 꾸미면서 몇번 고민했던 부분이 있어 혹시나 모르시는 분이 있다면 도움이 될까해서 올려봅니다.

(과연 모르는 분이 있긴 할련지...)


보통 col-md를 아래와 같이 좌우로 나누어 사용하셨을텐데요.

A B


제가 원했던 구성은 단순히 좌우로 나뉘는 것이 아닌 아래와 같은 형태였습니다.

A B1
B2


개발이나 퍼블리싱 쪽 경험이 없어서 고민하다가 시도해본 방법이 col-md 안에 col-md를 넣는 것이었죠.


방법은 간단합니다.


일반적인 좌우로 나뉘는 경우

<div>
    <div class="col-md-6">A</div>
    <div class="col-md-6">B</div>

</div>

이런 식으로 사용하실 겁니다.


제가 원하는 형태로 노출할 경우에는

<div>
    <div class="col-md-6">A</div>
    <div class="col-md-6" style="padding:0;">
        <div class="col-md-12">B1</div>

        <div class="col-md-12">B2</div>

    </div>

</div>

이런 식으로 하시면 됩니다.

위에서 padding:0을 넣은 이유는 col-md 에 15px padding이 적용되기 때문에 col-md안에 col-md가 들어가면서 padding 값이 30px로 되는 것을 막기 위함입니다.

7 Comments
18 사노라면 01.04 22:34  
저도 이것때문에 많이 힘들엇는데 팁으로 공개해주셔서 감사합니다
9 박용성 01.05 01:18  
감사합니다!!

col-md- 뒤의 숫자는 무얼 의미하나요?
17 신비 01.05 15:12  
col : column 열

md : medium device or middle device ...중간크기 기기

Congratulation! You win the 40 Lucky Point!

3 RIDDLE 01.05 16:17  
간단하게 생각하시면 가로 100%가 col-md-12라고 생각하시면 되요
col-md-6 col-md-6 하면 가로 50% 50%로 나누어 보여지는 형식이에요
14 티스탁 01.05 23:50  
감사합니다. 좋은 팁이네요
16 디폴트 01.08 15:12  
저도 이거 때문에 골치 아팠던 기억이 ㅎㅎ 좋은 팁 감사합니다.
8 l2zeo 01.15 21:39  
https://getbootstrap.com/docs/4.0/layout/grid/
제목
최근 글
최근 댓글
Facebook Twitter GooglePlus KakaoStory KakaoTalk NaverBand