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

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

css関連記事

• 

  レスポンシブ対応がカンタンに！CSS aspect-ratioプロパティの使い方

• 

  jQuery UIのsortableを使ってリストをドラッグで並び替える

• 

  HTMLのsvgタグとJavaScriptで円グラフの画像をつくる

• 

  select・optionタグをjQueryで、プルダウンの選択値を取得、変更する

• 

  placeholderを見やすく！jQuery+css3でつくるフローティングラベル

• 

  効率よくセレクタを指定してcss効かせるサンプル！21選

• 

  楽天スマホで使える！classを使わずにcssを適用する裏技

• 

  cssのkeyframesで画像に動きや変化のアニメーションをつけるサンプル10選

• 

  cssで要素に動きや変化をアニメーションでつける、keyframesの使い方

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

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を使うとそもそもこの現象が起きなかったので、変更できるのであれば変更したほうが楽ですね。