如何使用twitter bootstrap对齐图像？

Question

我在rails视图中有以下代码。我正在使用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 %>

另外，在旁注 - 我强烈建议您为链接使用rails路由，而不是手动输入它们（例如product.path（product））。此外，我建议不要使用中心标签，因为它们已经过时，并建议使用CSS。

以下是in_groups_of方法http://api.rubyonrails.org/classes/Array.html#method-i-in_groups_of

的Ruby文档的链接