트위터 부트 스트랩을 사용하여 이미지를 정렬하는 방법은 무엇입니까?

Question

레일 뷰에 다음 코드가 있습니다. 나는 트위터 - 부트 스트랩을 사용하고 있으며 형식을 올바르게 맞추는 데 문제가 있습니다. 이미지에서 볼 수 있듯이 두 번째 줄에는 간격이 있고 세 번째 줄의 모든 것은 첫 번째 줄의 모든 것과 약간 어긋납니다 (두 번째 줄에 공백이 있기 때문에). 내가 원하는 것은 각 줄에 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 %> 

또한 아웃이 시도 - 내가보기 엔 (그들을 입력 수동으로 링크 레일 경로를 사용하는 대신에 제안 예 product_path을 (. 제품)). 또한 센터 태그는 쓸모 없으므로 CSS를 사용하는 것이 좋습니다.

다음은 in_groups_of 메소드에 대한 Ruby 문서에 대한 링크입니다. http://api.rubyonrails.org/classes/Array.html#method-i-in_groups_of