ブートストラップグリッド行

私は現在、3列のデータをリストしています。これらの列の内容は、高さを変えることができると私は高さが、このスクリーンショットで見られると同じ100％ではない場合、それは不均一なデザインを作成することに気付きました：ブートストラップグリッド行

理想的には、私は思います行が均等に残っているように、行は均等になります。現在のCSSは次のとおりです。

<span v-for="team in teamSet.teams"> 
    <div class="col-xs-12 col-sm-4 col-md-4 col-lg-4"> 
     // vuejs templating code 
    </div> 
</span>

VueJSとブートストラップでこれを達成する方法を考え出すことができませんでした。誰かがアイデアを提供できますか？吐き出しているものvue.js知らない

2016-10-27 Webnet

別のオプション、およびのための最善のアプローチであるあなたが、フレックスディスプレイを使用している、あなたはこのflex guide

で詳細情報を取得することができますを探しています

基本的には、以下のCSSでのコンテナの設定で構成されています。ここ

.flex-container { 
    display: flex; 
    flex-flow: row wrap; 
}

フレックスは非常に適しており、多くの要求を処理できます

2016-10-28 21:44:42 ragnar

-1

は、私が唯一の非特異的な答えを与えることができます。

.container > .direct-child-element:nth-child(3n+1) { 
    clear: both 
}

を「.containerは」列と「.direct-子要素」にラッパーになり表し列（直接の子供たち）。

説明：上の列が大きいほど、下の列は単に途中であり、最初の要素（nth-child（3n + 1）で選択されている）の各行をクリアするため、下の列が "float over"行は常に上記の要素を「クリア」し、最後まで浮かせます。

PS：あなたが提供するコードスニペットは、HTMLではないCSS :)

2016-10-27 23:31:47 DaPrae

答えて