Rails, выровнять динамические элементы с помощью bootstrap

Question

Я пытаюсь отобразить представление своих продуктов и выровнять их с помощью бутстрапа, как в моей модели. Проблема состоит в том, что, поскольку элементы создаются динамически, я не могу сделать большой загрузочный div для всех своих элементов, чтобы установить смещение, и если бы я просто установил размер элемента, они не были выровнены вообще: Я отобразил их на черном фоне, чтобы лучше видеть, как расположены каждый div.

<% @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"><%=number_to_currency(product.price)%></span> 
 
    </div> 
 
    </div> 
 
</div>

моя модель:

Как я могу сделать, пожалуйста?

Редактировать: Моя проблема еще не решена, у меня всегда есть мои элемы, идущие повсюду, я сделал два раздела, и они не реагируют одинаково .. Я действительно не понимаю, в чем проблема на самом деле. Возможно ли, что рельсы плохо поддерживают бутстрап? Вот мой код на самом деле, я изменил его немного ..

.logo_img{ 
 
    position: relative; 
 
    top: 55px; 
 
    left: -50px; 
 
    max-width: 250px; 
 
} 
 

 
.title{ 
 
    display: block; 
 
    top: 100px; 
 
} 
 

 
.img_tasse{ 
 
    top: 100px; 
 
    left : -60px; 
 
    max-width: 110px; 
 
} 
 

 
h1{ 
 
    text-align: center; 
 
    z-index: 3; 
 
    display: block; 
 
    left: -50px; 
 
top : 190px; 
 
} 
 

 
.img_back{ 
 
    z-index: 1; 
 
    top: 170px; 
 
    left : 0; 
 
} 
 

 
.illu_front{ 
 

 
    top: -410px; 
 
    z-index: 2; 
 
} 
 

 
p.txt_soli{ 
 
    color: white; 
 
    z-index: 2; 
 
    top: -760px; 
 
} 
 

 
.soli{ 
 
    background-color: blue; 
 
} 
 

 
.entry{ 
 
    background-color: yellow; 
 
    margin: 0; 
 
    padding: 0; 
 
    top : -200px; 
 
    text-align: left; 
 
} 
 

 
.product_img{ 
 
    margin-right: 0; 
 
    padding: 0; 
 
    background-color: red; 
 
    display: block; 
 
    position: relative; 
 
    width: 100%; 
 
} 
 

 
.the_img{ 
 
    margin: 0; 
 
    padding: 0; 
 
    background-color: blue; 
 
    width: 15vw; 
 
    max-width: 250px; 
 
} 
 

 
.the_img:hover + .discover{ 
 
    display: block; 
 
} 
 

 
.the_img + .discover:hover{ 
 
    display: block; 
 
    color: black; 
 

 
} 
 

 
.the_img:hover{ 
 
    opacity: 0.3; 
 
} 
 

 
.prod{ 
 
    background-color: black; 
 
    margin-right : 10px; 
 
    margin-left: 10px; 
 
} 
 

 
.discover { 
 
    display: none; 
 
    position: absolute; 
 
    top: 5vw; 
 
    left: 2.5vw; 
 
    color: black; 
 
    font-size: 1.2vw; 
 
    border-style: solid; 
 
    border-width: 2px; 
 
} 
 

 
.line_title{ 
 
    position: relative; 
 
} 
 

 
#fade { /*--Masque opaque noir de fond--*/ 
 
\t display: none; /*--masqué par défaut--*/ 
 
\t background: #000; 
 
\t position: fixed; left: 0; top: 0; 
 
\t width: 100%; height: 100%; 
 
\t opacity: .80; 
 
\t z-index: 9999; 
 
} 
 
.popup_block{ 
 
\t display: none; /*--masqué par défaut--*/ 
 
\t background: #fff; 
 
\t padding: 20px; 
 
\t border: 20px solid #ddd; 
 
\t float: left; 
 
\t font-size: 1.2em; 
 
\t position: fixed; 
 
\t top: 50%; left: 50%; 
 
\t z-index: 99999; 
 
\t /*--Les différentes définitions de Box Shadow en CSS3--*/ 
 
\t -webkit-box-shadow: 0px 0px 20px #000; 
 
\t -moz-box-shadow: 0px 0px 20px #000; 
 
\t box-shadow: 0px 0px 20px #000; 
 
\t /*--Coins arrondis en CSS3--*/ 
 
\t -webkit-border-radius: 10px; 
 
\t -moz-border-radius: 10px; 
 
\t border-radius: 10px; 
 
} 
 
img.btn_close { 
 
\t float: right; 
 
\t margin: -40px -30px 0 0; 
 
} 
 
/*--Gérer la position fixed pour IE6--*/ 
 

 
a:hover{ 
 
    background-color: none; 
 
}

<section class="product_section_1"> 
 
    <header id="top" class="header-store"> 
 
    <div class="img-top container"> 
 
     <a href="/showcase/Home"> <p><%=image_tag("logo.png", :class => 'logo_img col-xs-3 col-xs-offset-5 col-sm-3 col-sm-offset-5 col-md-3 col-md-offset-5 col-lg-3 col-lg-offset-5')%></p></a> 
 
     <p class="title col-xs-2 col-xs-offset-5 col-sm-2 col-sm-offset-5 col-md-2 col-md-offset-5 col-lg-2 col-lg-offset-5"> nos collections</p> 
 
      <div class="img_tasse col-xs-2 col-xs-offset-6 col-sm-2 col-sm-offset-6 col-md-2 col-md-offset-6 col-lg-2 col-lg-offset-6"><%=image_tag("tasse-section-1.png")%></div> 
 
    </div> 
 
    <div class="block-sultan container"> 
 
     <h1 class="col-xs-5 col-xs-offset-5 col-sm-5 col-sm-offset-5 col-md-4 col-md-offset-5 col-lg-3 col-lg-offset-5 line_title">Les infusions du Sultan</h1> 
 
     <div class="row"> 
 
     <div class="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"><%=image_tag("photo-back-section-1.png")%></div> 
 
     <div class="illu_front col-xs-6 col-xs-offset-7 col-sm-6 col-sm-offset-7 col-md-4 col-md-offset-7 col-lg-4 col-lg-offset-7"><%=image_tag("illu-front-section-1.png")%></div> 
 
     </div> 
 
     <p class="txt_soli col-xs-4 col-xs-offset-2 col-sm-4 col-sm-offset-2 col-md-4 col-md-offset-2 col-lg-4 col-lg-offset-2"> le roi preferé des francais, François 1er fut connu pour son amour de l'élegance, du raffinement et de la culture. Contemporain 
 
     de Soliman, ils établirent ensemble les premières relations diplomatiques au monde.</p> 
 
    </div> 
 
</header> 
 
    <div class="row prod"> 
 
    <% cache ['store', Product.latest] do %> 
 
    <% @type1.each_with_index do |product, index| %> 
 
    <% cache ['entry', product] do %> 
 
     <div class="product-tile"> 
 
     <div class="entry col-xs-2 col-xs-offset-0 col-sm-4 col-sm-offset-0 col-md-4 col-md-offset-0 col col-lg-4 col-lg-offset-0 col"> 
 
      <h3><%= product.title %></h3> 
 
      <div class="product_img img-responsive"> 
 
      <%= image_tag(product.image_url, :class => 'the_img') %> 
 
      <%= link_to 'Discover', '#', class: %w(poplight discover), data: { rel: "popup_type1#{index}", width: "1000"} %> 
 
       <div id="popup_type1<%= index %>" class="popup_block"> 
 
\t    <h3><%=product.title%></h3> 
 
       <%= image_tag(product.image_url, :class => 'the_img') %> 
 
        <span class="price"><%=number_to_currency(product.price)%></span> 
 
        <%= button_to 'Add to Cart', line_items_path(product_id: product) %> 
 
\t     <p>Soh Tanaka est traduit sur developpez.com.</p> 
 
       </div> 
 
      </div> 
 
      <div class="product_description"> 
 
      <%= sanitize(product.description)%> 
 
      <div class="price_line"> 
 
       <span class="price"><%=number_to_currency(product.price)%></span> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    <%end%> 
 
    <%end%> 
 
    <%end%> 
 
    </div> 
 
</section> 
 
<section class="product_section_2"> 
 
    <header id="top" class="header-store"> 
 
    <div class="img-top container"> 
 
     <div class="img_tasse col-xs-2 col-xs-offset-6 col-sm-2 col-sm-offset-6 col-md-2 col-md-offset-6 col-lg-2 col-lg-offset-6"><%=image_tag("tasse-section-2.png")%></div> 
 
    </div> 
 
    <div class="block-sultan container"> 
 
     <h1 class="col-xs-5 col-xs-offset-5 col-sm-5 col-sm-offset-5 col-md-4 col-md-offset-5 col-lg-3 col-lg-offset-5 line_title">Les infusions du Roi</h1> 
 
     <div class="row"> 
 
     <div class="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"><%=image_tag("photo-back-section-2.jpg")%></div> 
 
     <div class="illu_front col-xs-6 col-xs-offset-7 col-sm-6 col-sm-offset-7 col-md-4 col-md-offset-7 col-lg-4 col-lg-offset-7"><%=image_tag("illu-front-section-2.jpg")%></div> 
 
     </div> 
 
     <p class="txt_soli col-xs-4 col-xs-offset-2 col-sm-4 col-sm-offset-2 col-md-4 col-md-offset-2 col-lg-4 col-lg-offset-2"> le roi preferé des francais, François 1er fut connu pour son amour de l'élegance, du raffinement et de la culture. Contemporain 
 
     de Soliman, ils établirent ensemble les premières relations diplomatiques au monde.</p> 
 
    </div> 
 
    </header> 
 
    <div class="row prod"> 
 
    <% cache ['store', Product.latest] do %> 
 
    <% @type2.each_with_index do |product, index| %> 
 
    <% cache ['entry', product] do %> 
 
     <div class="product-tile"> 
 
     <div class="entry col-xs-5 col-xs-offset-0 col-sm-4 col-sm-offset-1 col-md-4 col-md-offset-1 col col-lg-4 col-lg-offset-1 col"> 
 
      <h3><%= product.title %></h3> 
 
      <div class="product_img img-responsive"> 
 
      <%= image_tag(product.image_url, :class => 'the_img') %> 
 
      <%= link_to 'Discover', '#', class: %w(poplight discover), data: { rel: "popup_type2#{index}", width: "1000"} %> 
 
       <div id="popup_type2<%= index %>" class="popup_block"> 
 
\t    <h3><%=product.title%></h3> 
 
       <%= image_tag(product.image_url, :class => 'the_img') %> 
 
       <span class="price"><%=number_to_currency(product.price)%></span> 
 
       <%= button_to 'Add to Cart', line_items_path(product_id: product) %> 
 
       <%= text_field_tag 'quantity' %> 
 
\t     <p>Soh Tanaka est traduitee sur developpez.com.</p> 
 
       </div> 
 
      </div> 
 
      <div class="product_description"> 
 
      <%= sanitize(product.description)%> 
 
      <div class="price_line"> 
 
       <span class="price"><%=number_to_currency(product.price)%></span> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    <%end%> 
 
    <%end%> 
 
    <%end%> 
 
    </div> 
 
</section>

Я хочу, чтобы мои elems быть выровнены по 3, а когда экран не является достаточно большим, я хочу, чтобы они меня выровняли на 2 .. Как бы вы это сделали? Pehaps, что есть конфликт с другим css, вроде scaffold.scss, но я не нашел, где бы я мог быть. Надеюсь, кто-то может найти проблему. Спасибо ..

Answer 1

Проблема заключается в изменении высоты. Если ваш текст постоянно меняется, попробуйте усечь его с помощью многоточия, а затем покажите больше на странице показа.

Чтобы устранить проблему с вашей текущей страницей, я бы сделал обертку для всего в div и придавал ей фиксированную высоту. EG:

<% @products.each do |product| %> 
    <div class="product-tile"> 
     <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"><%=number_to_currency(product.price)%></span> 
     </div> 
     </div> 
    </div> 
    <% end %> 

Затем дают product-tile CSS высоту сказать height: 400px, или вы играете с и работать.

Answer 2

Похоже, вы пытаетесь вставить слишком много столбцов в ряд. Попытайтесь начать с этого, а затем можете стилизовать divs по своему усмотрению.

<% @products.in_groups_of(3, false) do |products| %> 
    <div class="row"> 
    <% products.each do |product| %> 
     <div class="col-xs-4 ..."> 
     ... 
     </div> 
    <% end %> 
    </div> 
<% end %>