为什么 Bourbon Neat 将第一行的第 4 项移到下一行？

Question

我正在尝试实现研究人员图片库。

我的视图模板如下所示：

app/views/members/index.html.erb

<div class="researchers">
  <h2>Current Members</h2>
  <% @members.each do |member| %>
    <% if member.active %>
      <div class="researcher">
        <%= link_to member_path(member) do %>
          <%= image_tag member.member_pic.url(:medium) %>
        <% end %>
        <p><%= link_to member.name, member_path(member) %><br><%= member.title %></p>
      </div><!-- .researcher -->
    <% end %>
  <% end %>
</div><!-- .researchers -->

我的 Sass 代码如下所示：

  /app/assets/stylesheets/partials/_members.scss

  div.researchers {
    @include clearfix;
    margin-top: 2.25em;
    text-align: center;
    h2 {
      margin-bottom: 3.375em;
    }
  }

  div.researcher {
    @include media($medium-screen) {
      @include span-columns (3);
      @include omega(4n);
    }
  }

但由于某种原因，第一行的第四项移到了第二行（见屏幕截图）

如您所见，其他行有 4 个项目，但第 1 行只有 3 个项目。我该如何解决这个问题？

感谢您的帮助，

安东尼

我的仓库位于：

https://github.com/acandael/hedera-rails

Answer 1

您需要将 h2 移到包含所有 .researcher div 的 div 之外。 h2 是导致 nth-child(4n) 规则应用于第 3、7、11 等研究人员而不是第 4、8 等研究人员的第一个子元素。

<h2>Current Members</h2>

<div class="researchers">
  <% @members.each do |member| %>
    <% if member.active %>
      <div class="researcher">
        <%= link_to member_path(member) do %>
          <%= image_tag member.member_pic.url(:medium) %>
        <% end %>
        <p><%= link_to member.name, member_path(member) %><br><%= member.title %></p>
      </div><!-- .researcher -->
    <% end %>
  <% end %>
</div><!-- .researchers -->

为什么 Bourbon Neat 将第一行的第 4 项移到下一行？

why is Bourbon Neat moving 4th item of first row to next row?

bourbon

neat