爲什麼波本尼雅將第一行的第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 -->