我的 Rails View 中有以下代码。我正在使用 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>
最佳答案
试试这个
<% @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 routes 作为您的链接,而不是手动输入它们(例如 product_path(product) )。另外,我建议不要使用中心标签,因为它们已经过时了,建议使用 CSS。
这是 in_groups_of 方法的 Ruby 文档的链接 http://api.rubyonrails.org/classes/Array.html#method-i-in_groups_of
关于twitter-bootstrap - 如何使用 twitter bootstrap 对齐图像?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16702982/