부트스트랩 그리드 질문합니다

부트스트랩 그리드 질문합니다

QA

부트스트랩 그리드 질문합니다

본문


.page-mybank .selection {text-align:center;}
.page-mybank .selection .text {margin-top: 15px;}
.page-mybank .option {border:0px solid #eaeaea;padding:15px;}
<div class="m-t-20">
            <div class="selection">
                <div class="text col-md-2 col-sm-12">
                    <h6><strong>이용권1</strong></h6>
                </div>
                <div class="col-md-10 col-sm-12">
                    <div class="option col-8 col-md-3">
<div class='price_btn'>
        <div class='price_item'>
            <h5 class='title color-pink'>2,000P</h5>
            <div class='date'>1개월</div>
        </div>
</div>
                        <div class="m-t-10">
                            <a href="javascript:void(0);" class="btn-e btn-e-lg bg-deep-purple" onclick="buy(1);">구매하기</a>
                        </div>
                    </div>
                    <div class="option col-6 col-md-3">
<div class='price_btn'>
        <div class='price_item'>
            <h5 class='title color-pink'>4,000P</h5>
            <div class='date'>3개월</div>
        </div>
</div>
                        <div class="m-t-10">
                            <a href="javascript:void(0);" class="btn-e btn-e-lg bg-deep-purple" onclick="buy(2);">구매하기</a>
                        </div>
                    </div>
                    <div class="option col-6 col-md-3">
<div class='price_btn'>
        <div class='price_item'>
            <h5 class='title color-pink'>7,000P</h5>
            <div class='date'>6개월</div>
        </div>
</div>
                        <div class="m-t-10">
                            <a href="javascript:void(0);" class="btn-e btn-e-lg bg-deep-purple" onclick="buy(3);">구매하기</a>
                        </div>
                    </div>
                    <div class="option col-6 col-md-3">
<div class='price_btn'>
        <div class='price_item'>
            <h5 class='title color-pink'>12,000P</h5>
            <div class='date'>12개월</div>
        </div>
</div>
 <div class="m-t-10">
                            <a href="javascript:void(0);" class="btn-e btn-e-lg bg-deep-purple" onclick="buy(4);">구매하기</a>
                        </div>
                    </div>
                </div>
                <div class='clearfix'></div>
            </div>
            <div class="selection m-t-20">
                <div class="text col-md-2 col-sm-12">
                    <h6><strong>이용권2</strong></h6>
                </div>
                <div class="col-md-10 col-sm-12">
                    <div class="option col-6 col-md-3">
<div class='price_btn'>
        <div class='price_item'>
            <h5 class='title color-pink'>1,000P</h5>
            <div class='date'>7일</div>
        </div>
</div>
                        <div class="m-t-10">
                            <a href="javascript:void(0);" class="btn-e btn-e-lg bg-deep-purple" onclick="buy(5);">구매하기</a>
                        </div>
                    </div>
                    <div class="option col-6 col-md-3">
<div class='price_btn'>
        <div class='price_item'>
            <h5 class='title color-pink'>3,000P</h5>
            <div class='date'>1개월</div>
        </div>
</div>
                        <div class="m-t-10">
                            <a href="javascript:void(0);" class="btn-e btn-e-lg bg-deep-purple" onclick="buy(6);">구매하기</a>
                        </div>
 

 

부트스트랩3에서 작성된 위와 같은 코드에서 부트스트랩5에서 사용하려니 그리드가 깨지네요

반응형으로 PC에서는 이용권1은 한줄에  4개 버튼이 나오고 모바일에서는 한줄에 2개씩 두줄이

나오게 하고 이용권2는 한줄에 2개 버튼이 나옵니다. 모바일에서도 동일하게 한줄에 2개씩 

나오게 하고 싶은데요. col col-md 가 헷갈리네요. 고수님의 도움이 필요합니다
 

이 질문에 댓글 쓰기 :

답변 1

 col 은 비반응형, col-md(sm, lg, ~~~)  는 반응형입니다.

 g-3 는 col 간격 여백

 

col-6 col-md-3 : md 크기 이상에서는 col-md-3 이 적용되고 그 이하에서는 col-6 이 적용되는 의미임.

 

<div class="container text-center">    
      <div class="row g-3">
        <div class="col-6 col-md-3">
            <div class="p-3 bg-success">column            </div>
        </div>
        <div class="col-6 col-md-3">
            <div class="p-3 bg-primary">column            </div>
        </div>
        <div class="col-6 col-md-3">
            <div class="p-3 bg-danger">column            </div>
        </div>
         <div class="col-6 col-md-3">
             <div class="p-3 bg-info">column            </div>
        </div>
      </div>
  </div>

답변을 작성하시기 전에 로그인 해주세요.
전체 2,086
QA 내용 검색
filter #css ×

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT