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>