質問

Bootstrapを使っています。3つのカラムをすべて同じ高さにするにはどうしたらよいですか？

以下は問題のスクリーンショットです。青と赤のカラムと黄色のカラムを同じ高さにしたいのですが。

以下はそのコードです。

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="row">
    <div class="col-xs-4 panel" style="background-color: red">
        some content
    </div>
    <div class="col-xs-4 panel" style="background-color: yellow">
        catz
        <img width="100" height="100" src="https://lorempixel.com/100/100/cats/">
    </div>
    <div class="col-xs-4 panel" style="background-color: blue">
        some more content
    </div>
</div>
</div>

解決方法は？

最新の解決策 (2022)

Bootstrap 4 または 5 を使用した解決策 4

Bootstrap 4および5では、デフォルトでFlexboxが使用されているため、余分なCSSは必要ありません。

デモ

<div class="container">
    <div class="row ">
        <div class="col-md-4" style="background-color: red">
          some content
        </div>
        <div class="col-md-4" style="background-color: yellow">
          catz
          <img width="100" height="100" src="https://placekitten.com/100/100/">
        </div>
        <div class="col-md-4" style="background-color: green">
          some more content
        </div>
    </div>
</div>

マイナスマージンを利用した解決策1（レスポンシブ対応を崩さない）

デモ

.row{
    overflow: hidden; 
}

[class*="col-"]{
    margin-bottom: -99999px;
    padding-bottom: 99999px;
}

テーブルを使った解決策2

デモ

.row {
    display: table;
}

[class*="col-"] {
    float: none;
    display: table-cell;
    vertical-align: top;
}

フレックスを使った解決策3 2015年8月に追加しました。これ以前に投稿されたコメントは、この解決策には適用されません。

デモ

.row {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display:         flex;
  flex-wrap: wrap;
}
.row > [class*='col-'] {
  display: flex;
  flex-direction: column;
}