Я в рельсах с бутстрапом.

У меня есть продуктовый сайт с большим количеством продуктов. мне нужно отображать мои продукты в формате сетки для «витрины». у каждого продукта есть фото и некоторая информация.

Я видел это сообщение и это сообщение, но это не то, что я ищу для.

Я пытаюсь перебрать каждый продукт с помощью product.each, пытаясь использовать сеточную систему начальной загрузки.

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

На данный момент мне кажется, что каждый продукт переходит в следующую строку и что каждый продукт находится внутри своего собственного столбца, но при любой попытке изменить размер изображения или div или col, внутри которых находится каждый продукт, все становится смещенным.

Вот мой файл html.erb:

<div class="row">
 <% @products.each do |product| %>
  <div class="col-md-3">
   <div id="storeimages">
    <%= image_tag(product.image_url, class: "img-responsive") %>
    <h3><%= product.title %></h3>
    <div><%= sanitize(product.description) %></div>
    <div><%= number_to_currency(product.price) %></div> 
    <%= button_to 'Add to Cart', line_items_path(product_id: product), 
         class: 'btn btn-info btn-sm', remote: true %>
   </div>
  </div>
 <% end %>
</div>
4
kacy hulme 2 Май 2014 в 21:53

2 ответа

Лучший ответ

Предполагая, что вам нужны строки из 4 столбцов, вы можете сделать что-то вроде этого:

<% @products.in_groups_of(4, false).each do |group| %>
  <div class='row'>
    <% group.each do |product| %>
      <div class='col-md-3'>
        <%= image_tag(product.image_url, class: "img-responsive") %>
        <h3><%= product.title %></h3>
        <div><%= sanitize(product.description) %></div>
        <div><%= number_to_currency(product.price) %></div> 
        <%= button_to 'Add to Cart', line_items_path(product_id: product), class: 'btn btn-info btn-sm', remote: true %>
      </div>
    <% end %>
  </div>
<% end %>

Это разбивает ваши данные на группы по 4 элемента, а затем выводит строку div для каждой группы. Затем в каждой строке он выводит каждого члена группы в своем собственном столбце div.

false, переданный в in_groups_of, гарантирует, что вы не попытаетесь вывести столбец для строки, в которой меньше 4 элементов. Это произойдет в вашей последней строке, если общее количество продуктов не делится на 4, поскольку по умолчанию функция дополняет массив с помощью nil.

Спасибо @vermin за подсказку fill_with!

13
Jon 11 Июн 2014 в 19:49

Я также добавил следующий css.

Для div.col-md-3:

#productdescription { 
 height: 375px;
 width: 200px;
}

И для изображения:

   #img {
     height: 200px;
     width: 180px;
     overflow: hidden;
    }
0
kacy hulme 2 Май 2014 в 19:19