Question

我想在rails视图中为each_slice（）使用变量和另一个解决方案，具体取决于屏幕大小。我正在使用bootstrap，例如我想在同一行显示不同数量的项目，具体取决于屏幕大小。

我通常使用Meteor框架，它有句柄if语句，可以做我正在寻找的东西。由于我没有太多使用Rails，我想知道是否有类似的东西。

Bootstrap列： col-md-4 --> each_slice(3) col-sm-6 --> each_slice(2) col-sm-6 --> each_slice(1)

现在看来是这样的：

<div class="items">
  <% @items.each_slice(3) do |items| %>
    <div class="col-sm-12">
      <% items.each do |item| %>
        <div class="col-md-4 col-sm-6 col-xs-12">
          <div class="name item-header">
            <%= item.name %>
          </div>
          <div class="item description">
            <div class="collection">
              Collection: <%= item.collection %>
            </div>
            <div class="price">
              <%= item.price %>$
            </div>
          </div>
        </div>
      <% end %>
    </div>
  <% end %>
</div>

先谢谢你的帮助！

Answer 1

有一种解决方案甚至可以用于屏幕尺寸更改，但它包括渲染切片（3），切片（2）和切片（1）。

<div class="items">
  <% @items.each do |item| %>
    <div class="col-md-4 col-sm-6 col-xs-12">
      <div class="name item-header">
        <%= item.name %>
      </div>
      <div class="item description">
        <div class="collection">
          Collection: <%= item.collection %>
        </div>
        <div class="price">
          <%= item.price %>$
        </div>
      </div>
    </div>
  <% end %>
</div>

不要使用slice，只需使用普通each，bootstrap即可完成工作。

Answer 2

使用可变高度bootstrap列标记遇到相同的布局问题。

不使用slice来实际关闭行之间的引导行和列结构，引导布局会崩溃。

我正在使用Bootstraps响应式标签...您还可以添加更多屏幕尺寸/切片切换器......如果手动调整屏幕尺寸而不刷新，您可能遇到问题但是生成的布局就是您拥有的所有内容没有切片的时间。

<div class="items">

<div class="hidden-sm">
  <% @items.each_slice(3) do |items| %>
</div>
<div class="visible-sm">
  <% @items.each_slice(2) do |items| %>
</div>
    <div class="col-sm-12">
      <% items.each do |item| %>
        <div class="col-md-4 col-sm-6 col-xs-12">
          <div class="name item-header">
            <%= item.name %>
          </div>
          <div class="item description">
            <div class="collection">
              Collection: <%= item.collection %>
            </div>
            <div class="price">
              <%= item.price %>$
            </div>
          </div>
        </div>
      <% end %>
    </div>
  <% end %>
</div>

我使用的另一种选择是像Mosaic Grid Gallery这样的javascript，但更喜欢切片，因为它保持div的顺序而不会将它们全部移动。

如何在Rails视图中使用带有each_slice（）的变量

2 个答案: