Question

enter image description here 这是我的代码，我想这些元素从左到右排成一排，但是，结果是从上到下的一列......我的朋友说我使用的是for.each..circle错误的方式，但我不知道我的错... ...

<div class="row">

<div class="col-sm-6 col-md-3">
  <% @products.each do |product| %>
      <!-- <%= image_tag product.image.thumb %> -->
      <div class="thumbnail">
        <!-- <div style="border:1px solid #eee;padding:2px;float:left;margin-right:10px"><%= image_tag product.image.thumb %></div> -->
   <!-- <img src="product.image.thumb"/> -->
   <%= image_tag product.image.thumb %>
      <div class="caption">
        <h5>《<%=link_to(product.title, product_path(product))%>》 </h5>
         <!-- <p><%= product.description %></p> -->
         <table class="table table-boldered">
           <thead>
             <tr>
               <td>售价</td>
               <td>库存</td>
             </tr>
           <tr>
             <td><%= product.price %></td>
               <td><%= product.quantity %></td>
           </tr>
         </table>
        <p><a href="#" class="btn btn-primary" role="button">Buy</a> <a href="#" class="btn btn-default" role="button">Collect</a></p>
      </div>

    </div>
    <% end %>
  </div>
  </div>

Answer 1

如果你想连续对齐三个图像，那么Bootstrap解决方案将是这样的：

<div class="row">

       <div class="col-md-4">
                <img src="http://placehold.it/150x80?text=IMAGE" class="img-responsive" style="width:100%" alt="Image">
                <p>
                    Project 2
                </p>
       </div>

       <div class="col-md-4">
                <img src="http://placehold.it/150x80?text=IMAGE" class="img-responsive" style="width:100%" alt="Image">
                <p>
                    Project 2
                </p>
        </div>

        <div class="col-md-4">
                <img src="http://placehold.it/150x80?text=IMAGE" class="img-responsive" style="width:100%" alt="Image">
                <p>
                    Project 2
                </p>
        </div>
      </div>

关于bootstrap网格，elemet显示在一列而不是一行

1 个答案: