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

Question

我正在尝试实施研究人员的图像库。

我的视图模板如下所示：

应用程序/视图/构件/ 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移到包含所有div div的.researcher之外。 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 -->