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

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

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

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