Bootstrap 和 Rails，并排展示产品答案

【问题标题】：Bootstrap and Rails, display products side by sideBootstrap 和 Rails，并排展示产品
【发布时间】：2016-08-03 16:01:47
【问题描述】：

我正在尝试三个一组并排展示产品。但它们总是显示为列表。我做了我的引导预设，我试过 float:left, display: inline 块，但它不起作用。这是我的代码：

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

这是我的结果：

【问题讨论】：

您需要 3 人一组 col-*-4 ！其中* 是您想要的尺寸（lg、md、sm、xs）！
为什么？看起来很奇怪，因为我的图像宽度是 250 像素，边距为 80 像素..
引导网格系统有 12 列，12 / 4 = 3 ！表示每个产品必须占据 4 列！
是的，你是对的！这是我的错……谢谢！

标签： html twitter-bootstrap ruby-on-rails-4

【解决方案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" 添加到您的图像中以获得完全响应式布局。

希望对你有所帮助。

【讨论】：

我的元素完全没有用这个方法对齐是正常的吗？
我需要看一个例子！你能设置一个jsfiddle还是只是一个截图？
是的，我已经在我的回答中做到了，正如你所看到的，我将我的 elem-backgrounds 转换为黑色，并且对齐不是很好

【解决方案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 与这个方法不是很好对齐，看起来像那样，不居中，不对齐：

【讨论】：