Bootstrap和Rails，并排显示产品

Question

我试图通过三个小组并排显示产品。 但他们总是显示为列表。 我做了我的引导程序预设， 我试过float：left，display：inline block，但它不起作用。这里是我的代码：

<% @products.each do |product| %> 
 
    <div class="entry img_back col-xs-10 col-xs-offset-0 col-sm-10 col-sm-offset-0 col-md-9 col-md-offset-0 col-lg-9 col-lg-offset-1"> 
 
    <div class="product_img"> 
 
     <%= image_tag(product.image_url)%> 
 
    </div> 
 
    <div class="product_description"> 
 
     <h3><%= product.title %></h3> 
 
     <%= sanitize(product.description)%> 
 
     <div class="price_line"> 
 
     <span class="price"><%=product.price%></span> 
 
    </div> 
 
    </div> 
 
</div> 
 
<%end%>

这是我的结果：

Answer 1

引导电网系统有12列，组三种手段每个产品必须占据四列：

<div class="row"> 
    ..... 
    <div class="col-md-4"> 
     <div class="entry img_back"> 
      <!-- HTML here --> 
     </div> 
    </div> 
    <div class="col-md-4"> 
     <div class="entry img_back"> 
      <!-- HTML here --> 
     </div> 
    </div> 
    <div class="col-md-4"> 
     <div class="entry img_back"> 
      <!-- HTML here --> 
     </div> 
    </div> 
    ...... 
</div> 

备注：您需要将class="img-responsive"添加到您的图像以获得完全响应的布局。

我希望这会帮助你。

Answer 2

由于它工作得很好，我所做的：

<% @products.each do |product| %> 
 
    <div class="entry col-xs-4 col-xs-offset-0 col-lg-4 col-lg-offset-0"> 
 
     <div class="product_img img-responsive"> 
 
     <%= image_tag(product.image_url)%> 
 
    </div> 
 
    <div class="product_description"> 
 
     <h3><%= product.title %></h3> 
 
     <%= sanitize(product.description)%> 
 
     <div class="price_line"> 
 
     <span class="price"><%=product.price%></span> 
 
    </div> 
 
    </div> 
 
</div>

，但它看起来奇怪，我的div都不能很好地用这种方法一致，它看起来像，不集中，不对齐：