web-dev-qa-db-ja.com

Bootstrap行の高さが異なる列

私は現在次のようなものを持っています：

<div class="row">
    <div class="col-md-4">Content</div>
    <div class="col-md-4">Content</div>
    <div class="col-md-4">Content</div>
    <div class="col-md-4">Content</div>
    <div class="col-md-4">Content</div>
    <div class="col-md-4">Content</div>
    <div class="col-md-4">Content</div>
    <div class="col-md-4">Content</div>
    <div class="col-md-4">Content</div>
</div>

仮定すると、contentは幅がすべて同じで高さが異なるボックスでした。同じ「グリッドベースのレイアウト」を維持しながら、すべてのボックスを完全な線ではなく互いに下に並べることができます。 。

現在、TWBSはcol-md-4の次の行を前の3行目の最長要素の下に配置します。したがって、アイテムの各行は完全にきれいに整列されます。 （「石積み」レイアウト）

htmlcsstwitter-bootstrapresponsive-designbootstrap-4
67
user3379926

何らかの理由で、これは.display-flexクラスなしで私のために働いた

.row {
    display: flex;
    flex-wrap: wrap;
}
.row > [class*='col-'] {
    display: flex;
    flex-direction: column;
}
8
Steve Whitby

bootstrap=行に別の拡張機能（これもリアクティブです）を作成しました。次のようなものを試すことができます。

.row.flexRow { display: flex; flex-wrap: wrap;}

0
Akash Yellappa

Twitterブートストラップ内の列の合計は毎回12である必要があります。これにより、クリーンなグリッド設計が維持されます。

 <div class="row">
    <div class="col-md-4">Content</div>
    <div class="col-md-4">Content</div>
    <div class="col-md-4">Content</div>
 </div>
 <div class="row">
    <div class="col-md-4">Content</div>
    <div class="col-md-4">Content</div>
    <div class="col-md-4">Content</div>
 </div>
<div class="row">
    <div class="col-md-4">Content</div>
    <div class="col-md-4">Content</div>
    <div class="col-md-4">Content</div>
</div>
0
Christian Michael