asp.net-mvc - 引导列溢出

Question

我想显示一个类似于Dribbble的 4x3 网格结果。结果是分页的，一个页面可以包含零到十二个结果。

目前我有这样的事情：

<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

事实证明，它并没有我最初想象的那么完美。一旦每列中的内容高度不同，布局就会中断。

我最终做的是从这里提升一个不错的小扩展方法并将我的标记更新为：

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