Bourbon Neat이 첫 번째 행의 네 번째 항목을 다음 행으로 이동시키는 이유는 무엇입니까?

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

당신은 모든 .researcher div가 들어있는 div의 h2 외부를 이동해야합니다. h2는 8 대신 4의, 3, 7, 11 등의 연구에 적용 할 nth-child(4n) 규칙의 원인이되는 첫 번째 자식 요소 등

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