css - bootstrap col 中央寄せ - Bootstrapのカラムをすべて同じ高さにするにはどうしたらいいですか?

Bootstrap row col / css / twitter-bootstrap

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>

Kodos Johnson



Answer #1

今回のプロジェクトでは、ボーダーを持つ子要素のすべての行の高さを同じにして、ボーダーがギザギザに見えるようにしました。そのために、シンプルなCSSクラスを作成しました。

.row.borders{
    display: inline-flex;
    width: 100%;
}