<div class="container">
<b>最小のデバイスから最大のデバイスまで同じグリッドの場合</b>
<div class="row">
<div class="col">col</div>
<div class="col">col</div>
<div class="col">col</div>
<div class="col">col</div>
</div>
<b>8:4を絶対維持するマン</b>
<div class="row">
<div class="col-8">col-8</div>
<div class="col-4">col-4</div>
</div>
<b>小さなブレークポイント(sm)で水平に</b>
<div class="row">
<div class="col-sm">col-sm</div>
<div class="col-sm">col-sm</div>
<div class="col-sm">col-sm</div>
</div>
<b>PCでは33.3%、SPでは50%</b>
<div class="row">
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>
</div>
.row {
margin: 5px 0 25px 0;
}
.row div {
padding-top: 0.75rem;
padding-bottom: 0.75rem;
background-color: rgba(39, 41, 43, 0.03);
border: 1px solid rgba(39, 41, 43, 0.1);
}
This Pen doesn't use any external JavaScript resources.