Рубин на Rails каждый метод и дивы

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 и пытаюсь сделать это отзывчивым. Код отлично работает в полноэкранном режиме. Но затем я изменяю его размер, и мне нужно поставить <div class="clearfix visible-xs"></div> после каждого третьего, например, пункта вместо 5-го.

У кого-нибудь есть идеи о том, что я могу сделать, чтобы решить эту проблему?

Answer 1

Это будет проблема CSS, а не Rails

-

CSS

Вы должны look up about @media queries in CSS - это изменение в зависимости от того, какого размера экрана вы в настоящее время работаете (и динамичен). 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). То, что я пытаюсь порекомендовать, заключается в том, что вы определяете свой стиль, а не механизм рендеринга, чтобы определить исправление.

Вы действительно смотрите на отзывчивый дизайн - это значит, что он должен динамически адаптироваться к вашим вызовам. Это не входит в сферу рельсов; это CSS

Answer 2

Добавить другой if-условие % 3 с div.visible-lg

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

Но, да, это не элегантное решение.