Bootstrap列溢出

Question

我希望显示类似于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个结果，它们会换行到一个新行，但这似乎有点像黑客，我担心可能会有一些不良副作用。

这种方法可以吗？如果没有，首选方法是什么？

Answer 1

事实证明，它并没有像我最初的想法那样完美;一旦每列中的内容高度不同，布局就会破裂。

我最终做的是从here中提取一个很好的小扩展方法并将我的标记更新为：

@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>
}