在 Rails 中使用 Bootstrap 4. 为什么在 <div> 和 each_slice( ) 之间会出现空白？

Question

我正在使用带有 Rails 4 的 Bootstrap。我正在使用 each_slice() 创建两列。但是，使用以下代码，我在左侧列上得到一个空的大空间。

<% @projects.each_slice(1) do |projects| %>
      <div class="col-md-6">
           <% projects.each do |project| %>
                <p><%= project.name %></p>
           <% end %>
     </div>
<% end %>

所以为了进一步解释，我得到以下html：

<div class="row">
    <div class="col-md-6">This is displayed on the left</div>
    <div class="col-md-6">This is displayed on the right</div>
    <div class="col-md-6">This is displayed on the right</div>
    <!-- Here there is a huge empty space, between the first and fourth div -->
    <div class="col-md-6">This is displayed on the left</div>
    <div class="col-md-6">This is displayed on the right</div>
    <div class="col-md-6">This is displayed on the left</div>
    <div class="col-md-6">This is displayed on the right</div>
    <div class="col-md-6">This is displayed on the left</div>
</div>

div 的长度不同。我怎样才能均匀地显示它们，而有时 div 之间不会有很大的空间？我检查了所有的填充和边距，这不是因为它们。

Answer 1

我认为问题在于第二个和第三个 div 之间没有“左”div。 each_slice 将一个数组分组为子数组，但我不明白将它们分成一个元素的组有什么意义，这就是您调用@projects.each_slice(1) 时所做的事情。这可以简化为

<% @projects.each do |project| %>
  <div class="col-md-6">
    <p><%= project.name %></p>
  </div>
<% end %>

但是，我认为这不是你的问题。如果您列出的不是您想要的，您实际上想要生成什么 html？