Переполнение колонтитула бутстрапа

Question

Я хочу показать сетку 4x3 результатов, аналогичных Dribbble. Результаты разбиты на страницы и страница может содержать от нуля до двенадцати результатов.

На данный момент у меня есть что-то вроде этого:

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