부트 스트랩 및 레일, 나란히 디스플레이 제품

Question

3 개 그룹으로 나란히 제품을 표시하려고합니다. 그러나 항상 목록으로 표시됩니다. 내 부트 스트랩 프리셋을 수행했습니다. 플로팅 시도 : 왼쪽, 디스플레이 : 인라인 블록이 작동하지 않습니다. 여기에 내 코드 :

이

<% @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의이 아주 잘이 방법으로 정렬되지 않은, 이상한 보인다 정렬 :