Bootstrap グリッドのカスタマイズ

Tag:

BootstrapのSassファイルをカスタマイズして、デフォルトのグリッドの振舞を変更させてみます。

Bootstrapですが、ここでは「v4.0.0-alpha.2」を利用してます。

分割数を変更

分割数は、「scss/_variables.scss」の$grid-columnsで変更できます。

デフォルトは、以下のようになってます。

$grid-columns:               12 !default;

ここを直接編集するか、ここ以前に$grid-columnsを定義することで、分割数を変更できます。

「!default」は、「既に定義されている場合は上書きしません」という意味です。

containerの幅を固定にする

デフォルトだと各画面サイズにあわせて、containerクラスの幅が変更されます。
これを固定させたい場合は、下記のようにcontainerクラスを上書きします。

.container {
    max-width: none !important;
    width: 1024px;
}

横並びのカラムの高さを揃える

デフォルトだと、横並びのカラムはバラバラの高さになります。

displayプロパティを「table」「table-cell」にすることで、一番縦長の高さに統一することができます。

やり方は色々考えられますが、ここでは「grid_table」クラスを作成して、下記のように「grid_table」クラスを指定すると高さが揃うようにしてみます。

<div class="container grid_table" >
    <div class="row">
        
    </div>
</div>

まず、「scss/mixins/_grid-framework.scss」にmixinを追記します。

@mixin p_make-grid-columns($columns: $grid-columns, $breakpoints: $grid-breakpoints) {
    .grid_table {
        .row {
            display: table;
        }

        @each $breakpoint in map-keys($breakpoints) {
            @for $i from 1 through $columns {
                .col-#{$breakpoint}-#{$i} {
                    float: none;
                    display: table-cell;
                }
            }
        }
    }
}

上記mixin を「scss/_grid.scss」で読み込みます。

@include p_make-grid-columns();

スポンサーリンク