Question

我正在为在线商店构建产品页面并使用引导网格系统。现在当我添加项目时，它会垂直添加它们，但我更喜欢从左到右水平添加项目。此外，我希望在一个页面上显示超过12个项目。这会发生在默认情况下还是我必须将class =“col-lg-12”更改为其他内容？

 <div class="container">

        <div class="row">

            <div class="col-lg-12">
                <h1 class="page-header">Products</h1>
            </div>

            <div class="col-md-4 col-xs-6 thumb">
                 <% @products.each do |product| %>
                <a class="thumbnail" href="#">
                    <%= image_tag product.image.preview.url %>
                </a>
                 <% end %>
            </div>

        </div>
 </div>
</div>

Answer 1

之所以发生这种情况，是因为您要在单列中添加产品，但实际需要做的是为每个产品添加单独的列，它看起来像这样，每行显示三个产品

<div class="container">
   <div class="row">
       <div class="col-lg-12">
         <h1 class="page-header">Products</h1>
       </div>
       <% @products.each do |product| %>
         <div class="col-md-4 col-xs-6 thumb">
             <a class="thumbnail" href="#">
                  <%= image_tag product.image.preview.url %>
             </a>
         </div>
       <% end %>
   </div>
 </div>

关于第二部分，单页上只有12个产品，不会自动神奇地发生，在你的rails应用程序中你可以使用一个名为Kaminari的分页宝石来获取如何使用它的说明去链接

Rails：引导网格是否可以从左到右填充？

1 个答案: