如何在html（col）中实现style到rails [英] How to Implement style in html (col) to rails

问题描述

当我想要将html实现为rails
之前，我遇到了一个问题，我在桌面显示器上创建了3列，在移动显示器上创建了2列像这样

在桌面显示我的目录看起来像这样

  [1] [2] [3] 
 [4] [5 ] [6] 
  

但是当我更改为移动视图时，它们看起来像这样

  [1] [2] 
 [3] [4] 
 [5] 
 [6] 
  

以前使用的html语法与上面的
链接完全相同问题是我应该在哪里put

 < div class =clearfix visible-xs-block>< / div> 
  

和

 < div class =clearfix visible -md-block>< / div> 
  

是否必须在循环中添加IF或其他内容才能添加代码？
这是我的视图语法

 < div class =row-store> 
 <％@ games.each do |游戏| ％GT; 
< div class =con-space col-xs-6 col-md-4> 
 
<％= image_tag（game.image_url）％> 
< h3><％= game.title％>< / h3> 
< div> 
< span>平台：<％= game.platform.name％>< / span>< br /> 
< span>价格：<％= game.price％> < /跨度> 
< / div> 
 
< / div> 
<％end％> 
< / div> 
  

thx

解决方案首先放入'row'类，并在其中通过rails
循环'col-md / sm- *'div并将类'mg-btm'添加到'col'div。
我建议不要使用带有浮动或清除css的行存储类，
，除非它用于某种颜色样式！

希望这有助于！ ！

 < style> 
 .mg-btm {margin-bottom：15px;} 
< / style> 
 
< div class =row row-store> 
 
 <％@ games.each do | game | ％GT; 
< div class =col-xs-6 col-md-4 mg-btm> 
<％= image_tag（game.image_url）％> 
< h3><％= game.title％>< / h3> 
< div> 
< span>平台：<％= game.platform.name％>< / span>< br /> 
< span>价格：<％= game.price％> < /跨度> 
< / div> 
< / div> 
<％end％> 
 
< / div> 
  

I had a problem when I want to implement my html to rails previously I've made a catalog with 3 columns on the desktop display and 2 columns on a mobile display like this

in desktop display my catalog looks like this

[1] [2] [3]
[4] [5] [6]

but when I change to mobile view, they looks like this

[1] [2]
[3] [4]
    [5]
[6]

previous syntax that I use to html exactly like the links above the question is where should I put

<div class="clearfix visible-xs-block"></div>

and

<div class="clearfix visible-md-block"></div>

do I have to add "IF" or something else in the loop to add the code? this is my view syntax

<div class="row-store">
    <% @games.each do |game| %>
        <div class="con-space col-xs-6 col-md-4">

            <%= image_tag(game.image_url) %>
            <h3><%= game.title %></h3>
            <div>
              <span>Platform:  <%= game.platform.name %></span><br/>
              <span>Price: <%= game.price %> </span>
            </div>

        </div>
    <% end %>
</div>

thx

解决方案

First put 'row' class and inside it loop the 'col-md/sm-*' divs through rails and add class 'mg-btm' to 'col' div. I would recommend not using row-store class with floats or clear css, unless it is for some color styling!

Hope This helps!!

<style>
  .mg-btm {margin-bottom: 15px;}
</style>

<div class="row row-store">

  <% @games.each do |game| %>
    <div class="col-xs-6 col-md-4 mg-btm">
        <%= image_tag(game.image_url) %>
        <h3><%= game.title %></h3>
        <div>
          <span>Platform:  <%= game.platform.name %></span><br/>
          <span>Price: <%= game.price %> </span>
        </div>
    </div>
  <% end %>

</div>

这篇关于如何在html（col）中实现style到rails的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！