为什么波本尼雅将第一行的第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 --> 

我无礼的代码如下所示：

/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的第一个子元素，第八等

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