Bootstrap和Rails，并排显示产品

Question

我试图以三人一组的方式并排展示产品。 但它们始终显示为列表。 我做了自举预设， 我试过浮动：左，显示：内联块，但它不起作用。这是我的代码：

＆＃13;

＆＃13;

<% @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%>

＆＃13;

＆＃13;

＆＃13;

这是我的结果：

Answer 1

Bootstrap网格系统有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与这个方法不太一致，它看起来像那个，没有居中，没有对齐：