bootstrap4での5カラム使用

More than 1 year has passed since last update.

bootstrap4で5カラムを使用する場合は、

以下scssを追加する。

bootstrap3のときとの違いはflexの記述も追加すること。

//5カラム定義

.col-15, .col-sm-15, .col-md-15, .col-lg-15 {
position: relative;
min-height: 1px;
padding-right: 10px;
padding-left: 10px;
}
.col-15 {
width: 20%;
flex: 0 0 20%;
float: left;
}
@media (min-width: map-get($grid-breakpoints, sm)) {
.col-sm-15 {
width: 20%;
flex: 0 0 20%;
float: left;
}
}
@media (min-width: map-get($grid-breakpoints,md)) {
.col-md-15 {
width: 20%;
flex: 0 0 20%;
float: left;
}
.col-md-offset-15 {
margin-left: 4.3333333%;
}
}
@media (min-width: map-get($grid-breakpoints, lg)) {
.col-lg-15 {
width: 20%;
flex: 0 0 20%;
float: left;
}
}

あとは通常どおり使用する

<div class="row">

<div class="col-sm-15">
<p> 1 </p>
</div>
<div class="col-sm-15">
<p> 2 </p>
</div>
<div class="col-sm-15">
<p> 3 </p>
</div>
<div class="col-sm-15">
<p> 4 </p>
</div>
<div class="col-sm-15">
<p> 5 </p>
</div>
</div>