[英]Ruby on Rails each method and divs
Okay so I have this code 好吧,我有这个代码
<% @users.each_with_index do |user, index| %>
<p><%= user.name %></p>
<% if (index + 1) % 5 == 0 %>
<div class="clearfix visible-xs"></div>
<% end %>
<% end %>
Which says after every 5th item. 每5个项目后说一次。 Add a clearfix.
添加一个clearfix。 Great.
大。 But I am using bootsrap and trying to make this responsive.
但是我正在使用bootsrap并尝试使其响应。 Code works great in full screen.
代码在全屏模式下效果很好。 But then I resize it and I need to put the
<div class="clearfix visible-xs"></div>
after every 3rd, for example, item instead of 5th. 但是,然后我调整它的大小,并且需要在每第3个(例如,项目而不是第5个)之后放置
<div class="clearfix visible-xs"></div>
。
Anyone have any ideas on what I can do to solve this? 有人对我能解决这个问题有任何想法吗?
This will be a CSS issue rather than Rails 这将是一个CSS问题,而不是Rails
-- -
CSS CSS
You should look up about @media queries
in CSS - these change depending on what screen size you're currently running (and are dynamic). 您应该在CSS中查找
@media queries
-这些@media queries
会根据您当前正在运行(动态)的屏幕尺寸而变化。 Rails is just there to render the HTML, not implicate the styling Rails只是用来呈现HTML,而不是暗示样式
The most elegant solution will be to create a single class, which will then adapt as the media queries change - which I'd do this way: 最优雅的解决方案是创建一个类,该类将随媒体查询的变化而适应-我可以这样做:
<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
}
}
}
}
This may look somewhat complicated (you could clear it up by using pure SASS) - what I'm trying to recommend is that you look at your styling rather than your rendering mechanism to determine the fix. 这看起来有些复杂(您可以通过使用纯SASS清除它)-我想推荐的是看样式而不是通过渲染机制来确定修复。
You're really looking at a responsive design - meaning it needs to adapt dynamically to your calls. 您实际上是在考虑响应式设计-这意味着它需要动态适应您的呼叫。 This is not within the scope of rails;
这不在rails的范围内; it's CSS
这是CSS
Add another if-condition for % 3
with div.visible-lg
使用
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 %>
But, yes, it's not an elegant solution. 但是,是的,这不是一个优雅的解决方案。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.