对于rails中的每个html模式继续_Html_Css_Ruby On Rails_Ruby On Rails 5

对于rails中的每个html模式继续

html css ruby-on-rails

对于rails中的每个html模式继续,html,css,ruby-on-rails,ruby-on-rails-5,Html,Css,Ruby On Rails,Ruby On Rails 5,我试图模仿以下代码和图像： <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

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

<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 -->


四列
< p类=“空间LG HOR”>如果你要使用LROM乱数假文，你需要确保在文本中间没有任何隐藏的尴尬。互联网上的所有Lorem Ipsum生成器都倾向于在必要时重复预定义的块，这使得它成为互联网上第一个真正的生成器

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

<!-- 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 -->


看一看！
< p类=“空间LG HOR”>如果你要使用LROM乱数假文，你需要确保在文本中间没有任何隐藏的尴尬。互联网上的所有Lorem Ipsum生成器都倾向于在必要时重复预定义的块，这使得它成为互联网上第一个真正的生成器
“fancybox img-hover-v1”do%>
“img响应”%>

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

以下是我的查看页面源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 -->


看一看！
< p类=“空间LG HOR”>如果你要使用LROM乱数假文，你需要确保在文本中间没有任何隐藏的尴尬。互联网上的所有Lorem Ipsum生成器都倾向于在必要时重复预定义的块，这使得它成为互联网上第一个真正的生成器

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

更新

我能够找到这一点，但当我试图用以下代码实现它时：

<% @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%>


“fancybox img-hover-v1”do%>
“img响应”%>

我得到了这个结果：

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

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

class CreativesController

试试这个：
<% @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%>


“fancybox img-hover-v1”do%>
“img响应”%>
您必须将多媒体资料项目分为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 -->


“fancybox img-hover-v1”do%>
“img响应”%>
更新：您@current.length/3次执行@current.each do | gallery |
，它在整个@current上迭代。