For Each in rails html 模式延续

Question

我正在尝试模仿以下代码和图像：

<div class="container content">
<div class="text-center margin-bottom-50">
    <h2 class="title-v2 title-center">FOUR COLUMNS</h2>
    <p class="space-lg-hor">If you are going to use a <span class="color-green">passage of Lorem Ipsum</span>, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making <span class="color-green">this the first</span> true generator on the Internet.</p>
</div>

<div class="row  margin-bottom-30">
    <div class="col-sm-3 sm-margin-bottom-30">
        <a href="assets/img/main/img12.jpg" rel="gallery2" class="fancybox img-hover-v1" title="Image 1">
            <span><img class="img-responsive" src="assets/img/main/img12.jpg" alt=""></span>
        </a>
    </div>
    <div class="col-sm-3 sm-margin-bottom-30">
        <a href="assets/img/main/img13.jpg" rel="gallery2" class="fancybox img-hover-v1" title="Image 2">
            <span><img class="img-responsive" src="assets/img/main/img13.jpg" alt=""></span>
        </a>
    </div>
    <div class="col-sm-3">
        <a href="assets/img/main/img14.jpg" rel="gallery2" class="fancybox img-hover-v1" title="Image 3">
            <span><img class="img-responsive" src="assets/img/main/img14.jpg" alt=""></span>
        </a>
    </div>
    <div class="col-sm-3 sm-margin-bottom-30">
        <a href="assets/img/main/img15.jpg" rel="gallery2" class="fancybox img-hover-v1" title="Image 4">
            <span><img class="img-responsive" src="assets/img/main/img15.jpg" alt=""></span>
        </a>
    </div>
</div>

<div class="row margin-bottom-30">
    <div class="col-sm-3 sm-margin-bottom-30">
        <a href="assets/img/main/img17.jpg" rel="gallery2" class="fancybox img-hover-v1" title="Image 5">
            <span><img class="img-responsive" src="assets/img/main/img17.jpg" alt=""></span>
        </a>
    </div>
    <div class="col-sm-3 sm-margin-bottom-30">
        <a href="assets/img/main/img18.jpg" rel="gallery2" class="fancybox img-hover-v1" title="Image 6">
            <span><img class="img-responsive" src="assets/img/main/img18.jpg" alt=""></span>
        </a>
    </div>
    <div class="col-sm-3">
        <a href="assets/img/main/img19.jpg" rel="gallery2" class="fancybox img-hover-v1" title="Image 7">
            <span><img class="img-responsive" src="assets/img/main/img19.jpg" alt=""></span>
        </a>
    </div>
    <div class="col-sm-3 sm-margin-bottom-30">
        <a href="assets/img/main/img20.jpg" rel="gallery2" class="fancybox img-hover-v1" title="Image 8">
            <span><img class="img-responsive" src="assets/img/main/img20.jpg" alt=""></span>
        </a>
    </div>
</div>

<div class="row">
    <div class="col-sm-3 sm-margin-bottom-30">
        <a href="assets/img/main/img21.jpg" rel="gallery2" class="fancybox img-hover-v1" title="Image 9">
            <span><img class="img-responsive" src="assets/img/main/img21.jpg" alt=""></span>
        </a>
    </div>
    <div class="col-sm-3 sm-margin-bottom-30">
        <a href="assets/img/main/img22.jpg" rel="gallery2" class="fancybox img-hover-v1" title="Image 10">
            <span><img class="img-responsive" src="assets/img/main/img22.jpg" alt=""></span>
        </a>
    </div>
    <div class="col-sm-3">
        <a href="assets/img/main/img23.jpg" rel="gallery2" class="fancybox img-hover-v1" title="Image 11">
            <span><img class="img-responsive" src="assets/img/main/img23.jpg" alt=""></span>
        </a>
    </div>
    <div class="col-sm-3 sm-margin-bottom-30">
        <a href="assets/img/main/img24.jpg" rel="gallery2" class="fancybox img-hover-v1" title="Image 12">
            <span><img class="img-responsive" src="assets/img/main/img24.jpg" alt=""></span>
        </a>
    </div>
</div>
</div>
<!-- End Four Columns -->

在我的代码中，当图像在页面上呈现时，我能够完成部分我想做的事情：

<!-- Four Columns -->
<div class="container content">
    <div class="text-center margin-bottom-50">
        <h2 class="title-v2 title-center">Take a look!</h2>
        <p class="space-lg-hor">If you are going to use a <span class="color-green">passage of Lorem Ipsum</span>, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making <span class="color-green">this the first</span> true generator on the Internet.</p>
    </div>
    <% @current.each do |gallery| %>
    <div class="row  margin-bottom-30">

        <div class="col-sm-3 sm-margin-bottom-30">
            <%= link_to gallery.image.url, :class => "fancybox img-hover-v1" do %>
                <span><%= image_tag gallery.image, :class => "img-responsive" %></span>
            <%end%>
        </div>
        <%end%>
    </div>


</div>
<!-- End Four Columns -->

这是我的结果，但您会注意到它是不均匀的，并且开始的下一行是关闭的：

这是我的视图页面源 html 的样子：

<!-- Four Columns -->
        <div class="container content">
            <div class="text-center margin-bottom-50">
                <h2 class="title-v2 title-center">Take a look!</h2>
                <p class="space-lg-hor">If you are going to use a <span class="color-green">passage of Lorem Ipsum</span>, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making <span class="color-green">this the first</span> true generator on the Internet.</p>
            </div>

            <div class="row  margin-bottom-30">
                <div class="col-sm-3 sm-margin-bottom-30">
                    <a class="fancybox img-hover-v1" href="/system/galleries/images/000/000/008/original/GONZALO_%2822%29.JPG?1503775340">
                        <span><img class="img-responsive" src="/system/galleries/images/000/000/008/original/GONZALO_%2822%29.JPG?1503775340" alt="Gonzalo %2822%29" /></span>
</a>                </div>
                <div class="col-sm-3 sm-margin-bottom-30">
                    <a class="fancybox img-hover-v1" href="/system/galleries/images/000/000/007/original/Staples_Center_Bus_Bench.JPG?1503775325">
                        <span><img class="img-responsive" src="/system/galleries/images/000/000/007/original/Staples_Center_Bus_Bench.JPG?1503775325" alt="Staples center bus bench" /></span>
</a>                </div>
                <div class="col-sm-3 sm-margin-bottom-30">
                    <a class="fancybox img-hover-v1" href="/system/galleries/images/000/000/006/original/pexels-photo-323503.jpeg?1503775253">
                        <span><img class="img-responsive" src="/system/galleries/images/000/000/006/original/pexels-photo-323503.jpeg?1503775253" alt="Pexels photo 323503" /></span>
</a>                </div>
                <div class="col-sm-3 sm-margin-bottom-30">
                    <a class="fancybox img-hover-v1" href="/system/galleries/images/000/000/005/original/pexels-photo-532254.jpeg?1503775241">
                        <span><img class="img-responsive" src="/system/galleries/images/000/000/005/original/pexels-photo-532254.jpeg?1503775241" alt="Pexels photo 532254" /></span>
</a>                </div>
                <div class="col-sm-3 sm-margin-bottom-30">
                    <a class="fancybox img-hover-v1" href="/system/galleries/images/000/000/001/original/BERONICA_%286%29.JPG?1503774118">
                        <span><img class="img-responsive" src="/system/galleries/images/000/000/001/original/BERONICA_%286%29.JPG?1503774118" alt="Beronica %286%29" /></span>
</a>                </div>
            </div>


        </div>
        <!-- End Four Columns -->

我的控制台中没有与此问题相关的错误。我想要做的是继续 html 代码序列，在四个图像之后它开始一个新的行，从左到右。在我模仿四张图片后的代码中，它开始了一个新的部分。我不知道如何处理我的情况，即我使用 for each 来渲染我的图像。

更新

我能够找到这个Ruby on rails foreach with bootstrap3 row class，但是当我尝试用这段代码实现它时：

<% @current.each_slice(3) do |gallery| %>
<div class="row  margin-bottom-30">
<% @current.each do |gallery| %>
    <div class="col-sm-3 sm-margin-bottom-30">
        <%= link_to gallery.image.url, :class => "fancybox img-hover-v1" do %>
            <span><%= image_tag gallery.image, :class => "img-responsive" %></span>
        <%end%>
    </div>
    <%end%>
</div>
<%end%>

我得到了这个结果：

如您所见，它只是复制了第一部分。如果这有帮助，这是我的控制器：

class CreativesController < ApplicationController
  layout "creative"

  def index
    @campaigns = storage.list_for(params[:page], params[:tag])
    @campaigned = Campaign.order("created_at DESC").limit(6)
    @recent = Campaign.order("created_at DESC").limit(3)

    end

    # GET /posts/1
    # GET /posts/1.json
  def show

    @campaign = storage.friendly.find(params[:id])
    @gallery = storage.friendly.find(params[:id])
  end

  def gallery
   @galleries = storage.list_for(params[:page], params[:tag])
    @galleried = Gallery.order("created_at DESC")
    @current = Gallery.order("created_at DESC")

  end


  private

  def storage
    Campaign.published
    Gallery.published

  end







end

Answer 1

试试这个：

<% @current.each_slice(4) do |galleries| %>
<div class="row margin-bottom-30">
  <% galleries.each do |gallery| %>
  <div class="col-sm-3 sm-margin-bottom-30">
    <%= link_to gallery.image.url, :class => "fancybox img-hover-v1" do %>
    <span><%= image_tag gallery.image, :class => "img-responsive" %></span>
    <%end%>
  </div>
  <%end%>
</div>
<%end%>

Answer 2

您必须将您的图库项目分成 4 个项目，然后执行循环：

<!-- Four Columns -->
<div class="container content">

  <% @current.each_slice(4) do |slice| %>
    <div class="row  margin-bottom-30">
      <% slice.each do |gallery| %>
        <div class="col-sm-3 sm-margin-bottom-30">
          <%= link_to gallery.image.url, :class => "fancybox img-hover-v1" do %>
              <span><%= image_tag gallery.image, :class => "img-responsive" %></span>
          <% end %>
        </div>
      <% end %>
    </div>
  <% end %>

</div>
<!-- End Four Columns -->