부트스트랩 그리드 질문합니다
본문
.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>