2

Dribbbleに似た結果の 4x3 グリッドを表示したい。結果はページ分割され、ページには 0 ～ 12 個の結果を含めることができます。

現時点では、次のようなものがあります。

<div class="row">
    @foreach (var result in Model)
    {
        <div class="col-sm-3">
            <div class="well">
                <h3>@result.Name</h3>
                <p>@result.CreatedBy</p>
            </div>
        </div>
    }
</div>

これは実際には完全に機能しているようです。4 つ以上の結果がある場合、それらは新しい行にラップされますが、これはちょっとしたハックのように見え、望ましくない副作用があるのではないかと心配しています。

このアプローチは大丈夫ですか？そうでない場合、好ましいアプローチは何ですか？

4

1 に答える 1

6

私が当初考えていたほど完全には機能していないことが判明しました。各列のコンテンツの高さが異なるとすぐに、レイアウトが崩れました。

私が最終的にやったのは、ここから素敵な小さな拡張メソッドを持ち上げて、マークアップをこれに更新することでした:

@foreach (var row in Model.Partition(4))
{
    <div class="row">
        @foreach (var program in row)
        {
            <div class="col-sm-3">
                <div class="well">
                    <h2>@program.Name</h2>
                    <p>@program.Description</p>
                </div>
            </div>
        }
    </div>
}
于 2013-09-23T12:29:24.423 に答える