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>ベストアンサー1
最新ソリューション（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;
}
flex を使用したソリューション 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;
}