如何在Rails上循环实现网格物化

Question

我正在尝试使用它提供的materializeCss网格循环一些类型为“Instagram Grid”的图像。

所以我的代码是这样的：

<div class="section">
  <% @places.each do |place| %>
    <div class="places-grid">
    <div class="row">
      <div class="col s4 l4 m4 places-holder">
        <div class="card hoverable">
          <div class="card-image materialboxed" width="50">
            <%= image_tag place.picture.url if place.picture %>
            <span class="picture responsive-img"></span>
          </div>
          <div class="card-content mar-bottom">
            <%= render place %>
            <% if current_user?(place.user)%>
              <%= link_to place, method: :delete, class:"btn-floating halfway-fab waves-effect waves-light red", data: { confirm: "Seguro que quieres eliminar?" } do %>
                <i class="material-icons">delete</i> 
              <% end %>
            <% end %>
          </div>
        </div>
      </div>  
    </div>
  </div>
  <% end %>
</div>

但是这段代码做了什么，它使我的图像在这样的列中：

Card- with image
Card- with image
Card- with image

我希望这样：

  Card- with image        Card- with image         Card- with image

我知道网格的css代码是正确的，但也许我尝试循环它的方式是错误的。我非常感谢你的帮助！

Answer 1

您需要移动.each块，如下所示，因为您当前的代码循环使用类row创建3行：

  <div class="section">
      <div class="places-grid">
        <div class="row">
          <% @places.each do |place| %>
          <div class="col s4 l4 m4 places-holder">
            <div class="card hoverable">
              <div class="card-image materialboxed" width="50">
                <%= image_tag place.picture.url if place.picture %>
                <span class="picture responsive-img"></span>
              </div>
              <div class="card-content mar-bottom">
                <%= render place %>
                <% if current_user?(place.user)%>
                  <%= link_to place, method: :delete, class:"btn-floating halfway-fab waves-effect waves-light red", data: { confirm: "Seguro que quieres eliminar?" } do %>
                    <i class="material-icons">delete</i>
                  <% end %>
                <% end %>
              </div>
            </div>
          </div>
          <% end %>
        </div>
      </div>
  </div>