Question

我正在使用TradingCard模型构建Ruby on Rails应用程序。我有一个索引操作和相应的视图，我试图打印出每个TradingCard对象。这基本上是我在我的控制器中得到的，在我的索引操作下：

@trading_cards = TradingCard.all

这是我的问题：我正在使用bootstrap来帮助我使用基本的网格式样式方法，以及它在小型移动屏幕上的便利性。我正在使用bootstrap来帮助完成总体布局和流程，但我为每个TradingCard对象构建了自己的小型交易卡式容器;我用自己的CSS写了它。它没有指定的高度，因此它可以高到适合所有特定于该单个对象的文本。在中等大小的屏幕上，我希望我的索引视图每行只显示三张交易卡，每条行都不会被下面的交易卡所阻挡。这是一个问题，因为最佳做法是在索引视图中简单地包含以下内容（当然，在视图文件夹中包含_trading_card部分）：

<%= render @trading_cards %>

在我的_trading_card部分，我有类似的东西：

<div class="col-md-4">
<%= trading_card.body %>
</div>

这种方法的唯一问题是我无法真正告诉布局每3张交易卡创建一个新行。相反，我必须继续将col-md-4吐出一个非常长的行，结果，一些较高的交易卡最终将自己挤压到它们上方的行中，而且它看起来很奇怪。

有没有更好的方法来实现这整个方法？我错过了什么吗？或者有没有办法在我的控制器中指定我想以3个包的形式加载对象，这样我就可以编写一个迭代，每次循环创建一个新行？

非常感谢任何帮助。对不起，如果这个问题真的很长。你们总是很有帮助，我真的不能够感谢你们。

提前感谢您的帮助!!!!

Answer 1

而不是使用render @trading_cards为您循环TradingCard。你可以用3片（如@alfie建议的那样）自己做。

<% @trading_cards.each_slice(3) do |cards| %>
  <div class="row">
    <% cards.each do |card| %>
      <%= render card %>   <!-- This will render your `_trading_card` partial -->
    <% end %>
  </div>
<% end %>

使用bootstrap在Index操作中渲染Div

1 个答案: