引导列溢出答案

【问题标题】：Bootstrap Column Overflow引导列溢出
【发布时间】：2013-09-22 09:20:02
【问题描述】：

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

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

【问题讨论】：

标签： asp.net-mvc twitter-bootstrap

【解决方案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>
}

【讨论】：