Bootstrapのグリットスタイルで横並びのカラム同士の高さを揃える

プロモーションが含まれています

Bootstrapのグリットスタイルで横並びのカラム同士の高さを揃える

Bootstrapのグリットスタイルで、cardや画像などの横並びコンテンツで、それぞれの高さが違う場合に、高さ指定しないでカラム同士の高さを揃える方法

css関連記事

関連記事をもっとみる

カラム同士の高さを揃える

html

<div class="container">
    <div class="row">
        <div class="col-xs-12 col-sm-9">
            text...<br>text...<br>text...<br>text...<br>text...<br>text...<br>text...<br>text...<br>
        </div>
        <div class="col-xs-12 col-sm-3">
            text...
        </div>
    </div>
</div>

こんな感じでレイアウトしているときにカラム同士の高さが合わなくて困ったので
以下の方法で高さを揃えた。

htmlのrowにclassとstyleを追加

html

<div class="row row-eq-height">

高さを揃えたい要素達の親要素にrow-eq-heightのクラスを付与します。

次にcssを追加。

css

.row-eq-height {
    display: flex;
    flex-wrap: wrap;
}

これで要素達の高さが揃います。

Bootstrap4を使う

Bootstrap4を使うとそもそもこの現象が起きなかったので、変更できるのであれば変更したほうが楽ですね。

コメント

タイトルとURLをコピーしました