如何在 html (col) 中实现样式到 rails答案

【问题标题】：How to Implement style in html (col) to rails如何在 html (col) 中实现样式到 rails
【发布时间】：2016-08-31 00:32:52
【问题描述】：

当我想将我的 html 实现到 rails 时遇到问题之前我制作了一个目录，在桌面显示上显示 3 列，在移动显示上显示 2 列like this

在桌面显示中，我的目录如下所示

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

但是当我切换到移动视图时，它们看起来像这样

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

我使用的以前的语法与上面的链接完全一样问题是我应该放在哪里

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

和

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

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

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

谢谢

【问题讨论】：

您可以使用媒体w3schools.com/cssref/css3_pr_mediaquery.asp 进行移动查看

标签： html ruby-on-rails twitter-bootstrap

【解决方案1】：

我还没有使用过 Rails，但逻辑应该如下：

<div class="row-store">
    <% i = 0 %>

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

        <% if i != 0 %>
            <% if i % 2 == 0 %>
                <div class="clearfix visible-xs-block"></div>
            <% elsif i % 3 == 0 %>
                <div class="clearfix visible-md-block"></div>
            <% end %>
        <% end %>

        <% i++ %>

    <% end %>
</div>

【讨论】：

【解决方案2】：

首先放置'row'类并在其中循环'col-md/sm-*' div通过rails 并将类“mg-btm”添加到“col”div。我建议不要使用带有浮点数或清除 css 的行存储类，除非是为了一些颜色样式！

希望这有帮助！

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

【讨论】：