使用ERB(Rails)如何获得数据块以保持其位置？

Question

我正在用Bootstrap建立一个使用ERB的网站。我使用each_slice遍历数据(图像、标题、描述和正文)的数组，将它们放入每行两个数组中。它工作于but...because，一段数据的主体进一步扩展，它将下一行从左列推到右列。所以基本上我想要的是：

2, 3
4, 5
6, 7
8, 9
10

发生的情况如下：

2, 3
   4
5, 6
   7
8, 9
  10

这是因为在上面的内容中，2、5和8的内容都有更高的高度，并迫使列向右移动。

对于我所拥有的代码：

<div class="container">
<div class="row">
    <% @book.drop(1).each_slice(2) do |book, b| %>

        <div class="col-md-6 col-xs-10 col-sm-9">
            <%= image_tag book.book_image, class: 'wk-img' %>
                <p class="image-header wk-img-head paginaction-centered">
                    <%= book.title %>
                </p>
                <p class="image-text">
                    <%= book.description %>
                </p>
                <p class="image-text">
                    <%= book.body %>
                </p>


        </div>
        <div class="col-md-6 col-xs-10 col-sm-9">
            <% if b %>
                <%= image_tag b.book_image, class: 'wk-img' %>
                    <p class="image-header wk-img-head paginaction-centered">
                        <%= b.title %>
                    </p>
                    <p class="image-text">
                        <%= b.description %>
                    </p>
                    <p class="image-text">
                        <%= b.body %>
                    </p>
                    <% end %>
        </div>

        <% end %>
</div>

​

我尝试向较大的部分(2、5和8)添加边距和填充，但这没有任何作用。如果我完美地去掉每个section...works的正文。我在这方面做错了什么？

Answer 1

试着用row包住每个切片，而不是包住所有的项目(或者根据你想要的设计，也可能是另外的)：

<div class="container">
  <% @book.drop(1).each_slice(2) do |book, b| %>
    <div class="row">
      <div class="col-md-6 col-xs-10 col-sm-9">
        <%= image_tag book.book_image, class: 'wk-img' %>
        <p class="image-header wk-img-head paginaction-centered">
          <%= book.title %>
        </p>
        <p class="image-text">
          <%= book.description %>
        </p>
        <p class="image-text">
          <%= book.body %>
        </p>
      </div>
      <div class="col-md-6 col-xs-10 col-sm-9">
        <% if b %>
          <%= image_tag b.book_image, class: 'wk-img' %>
          <p class="image-header wk-img-head paginaction-centered">
            <%= b.title %>
          </p>
          <p class="image-text">
            <%= b.description %>
          </p>
          <p class="image-text">
            <%= b.body %>
          </p>
        <% end %>
      </div>
    </div>
  <% end %>
</div>