Ruby on Rails的每个方法和div

Question

好吧，我有这个代码

<% @users.each_with_index do |user, index| %>
  <p><%= user.name %></p>
  <% if (index + 1) % 5 == 0 %>
    <div class="clearfix visible-xs"></div>
  <% end %>
<% end %>

每5个项目后说一次。 添加一个clearfix。 大。 但是我正在使用bootsrap并尝试使其响应。 代码在全屏模式下效果很好。 但是，然后我调整它的大小，并且需要在每第3个（例如，项目而不是第5个）之后放置<div class="clearfix visible-xs"></div> 。

有人对我能解决这个问题有任何想法吗？

Answer 1

这将是一个CSS问题，而不是Rails

-

CSS

您应该在CSS中查找@media queries -这些@media queries会根据您当前正在运行（动态）的屏幕尺寸而变化。 Rails只是用来呈现HTML，而不是暗示样式

最优雅的解决方案是创建一个类，该类将随媒体查询的变化而适应-我可以这样做：

<div class="users">
  <% @users.each_with_index do |user, index| %>
    <li><%= user.name %></li>
    <% if (index + 1) % 5 == 0 %>
      <div class="clearfix visible-xs"></div>
    <% end %>
  <% end %>
</div>

#app/assets/stylesheets/application.css.scss
.users {
   li:nth-child(5) {
      &:after {
         //clearfix styling
      }
   }
}

@media (max-width: 600px) {
      li:nth-child(3) {
         &:after {
           #clearfix code
         }
      }
      li:nth-child(5) {
         &:after {
           display: none
         }
      }
   }
}

这看起来有些复杂（您可以通过使用纯SASS清除它）-我想推荐的是看样式而不是通过渲染机制来确定修复。

您实际上是在考虑响应式设计-这意味着它需要动态适应您的呼叫。 这不在rails的范围内； 这是CSS

Answer 2

使用div.visible-lg为% 3添加另一个if条件

<% @users.each_with_index do |user, index| %>
  <p><%= user.name %></p>
  <% if (index + 1) % 3 == 0 %>
    <div class="clearfix visible-lg"></div>
  <% end %>
  <% if (index + 1) % 5 == 0 %>
    <div class="clearfix visible-xs"></div>
  <% end %>
<% end %>

但是，是的，这不是一个优雅的解决方案。