Създаване на нова колона за фондация на зърбал за всяка картина от снимки в релси - css, ruby-on-rail, zurb-foundation

Аз използвам zurb фондация за bootstrap моя ап. В момента имам нещо подобно, което се случва в момента

<h3>Friends</h3>
<div class="row">
<div class="large-12 columns">
<div class="row">
<div class="large-3 columns">
<div class="friends">
<% @friends.each do |friend| %>
<tr>
<td><%= friend.full_name %></td><br/>
<td><%= image_tag(friend.image_url)%></td><br/>
</tr>
<% end %>
</div>
</div>
</div>
</div>
</div>

Показва няколко изображения. Това, което се опитвам да направя, е да създам "голяма 3 колони" за всяка снимка и да не показвам всички снимки в една "голяма 3 колони". Снимките трябва да завършват една до друга.

Най-вече се съсредоточавам върху рубините на релсите и по-малко върху предната страна. В моята application.css добавих това

.friends {
display: inline-block;
}

за да се опитате да направите снимките да се случват една до друга.

Отговори:

Мисля, че това, което търсите, може да е нещо такова.

<h3>Friends</h3>
<div class="row">
<div class="large-12 columns">
<% @friends.each do |friend| %>
<div class="large-3 columns">
<div class="friends">
<tr>
<td><%= friend.full_name %></td><br/>
<td><%= image_tag(friend.image_url)%></td><br/>
</tr>
</div>
</div>
<% end %>
</div>
</div>

За този пример не би трябвало да се нуждаете от набразден ред. Чрез поставяне на колоната .large-3 във всяка от вашите цикли ще се изведе нова колона за всеки обект на приятел.

По подразбиране колоните на фондацията ще се плуват вляво, така че не би трябвало да добавяте нищо за колоните, които да се показват, както искате.

Надявам се това да помогне.