bootstrap4

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>