LoginSignup
6
10

More than 5 years have passed since last update.

bootstrap4での5カラム使用

Posted at

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>
6
10
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
6
10