引導和導軌，並排顯示產品

Question

我正在嘗試並排展示三個產品。 但是它們始終顯示為列表。 我做了bootstrap預設，嘗試了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

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與這種方法的對齊方式不是很好，看起來像那樣，沒有居中，沒有對齊：