Как выровнять изображения с помощью twitter bootstrap?

Question

У меня есть следующий код в моем режиме просмотра рельсов. Я использую twitter-bootstrap, и у меня проблемы с правильной форматированием. Как показано на рисунке, на второй строке есть пробел, и все на третьем ряду слегка смещено со всем в первой строке (так как во втором ряду есть пробел). Я бы хотел, чтобы в каждой строке было 4 ящика; любой совет?

<div class = 'row-fluid'> 
    <div class = 'span12'> 
     <% @products.each_with_index do |(product),index| %> 
      <div class = 'span3'> 
       <center> 
        <a href = '/products/<%= product.id %>'> 
         <img style = 'width: 100px;' src = '/assets/logo/<%= product.slug.downcase %>-sq.jpg'> 
        </a><br /> 
        <a href = '/products/<%= product.id %>'><%= product.name %></a> 
       </center> 
      </div> 
     <% end %> 
    </div> 
</div> 
<div class = 'row'></div> 

Answer 1

Попробовать это

<% @products.in_groups_of(4, false) do |grouped_products| %> 
    <div class="row-fluid"> 
     <% grouped_products.each do |product| %> 
      <div class="span3"> 
       <center> 
        <a href = '/products/<%= product.id %>'> 
        <img style = 'width: 100px;' src = '/assets/logo/<%= product.slug.downcase %>-sq.jpg'> 
        </a><br /> 
        <a href = '/products/<%= product.id %>'><%= product.name %></a> 
       </center> 
     </div> 
     <% end %> 
    </div> 
<% end %> 

Кроме того, на стороне записки - я настоятельно рекомендую использовать рельсы маршрутов для вашей ссылки вместо того, чтобы вручную вводить их (Ex product_path (. продукт)). Кроме того, я бы посоветовал не использовать центральные теги, поскольку они устарели, и предложил бы использовать CSS.

Вот ссылка на документацию Ruby для метода in_groups_of http://api.rubyonrails.org/classes/Array.html#method-i-in_groups_of