Question

我正在制作一个基本的Ruby on Rails应用程序，用户可以在其中制作＆amp;查看帖子。

这是我用来展示帖子的代码

  <% if @feed_items.any? %>
   <ol class="posts">
<%= render @feed_items %>
 </ol>
<%= will_paginate @feed_items %>
  <% end %>

目前，我已为每个用户播放了大约50个帖子进行测试，帖子全部显示在以下列表中：

Post 1
Post 2
Post 3
Post 4 etc

我想使用bootstrap scss来设置这些帖子的样式，而不是上面的内容，它的样式更像是

Post 1              Post 2                Post 3
Post 4

每行有3个帖子，而不仅仅是1个。

有没有人有任何关于bootstrap scss的新手如何接近这个的建议？

Answer 1

此代码连续显示3个项目。

<ul class="list-group">
  <li class="list-group-item col-md-4">Post 1</li>
  <li class="list-group-item col-md-4">Post 2</li>
  <li class="list-group-item col-md-4">Post 2</li>
</ul>

https://v4-alpha.getbootstrap.com/components/list-group/

Answer 2

我认为brinjal 664.5 cabbage 556.7 chickpe 778.9非常适合您的需求。

以下代码会将您的Feed项集合划分为3行组，然后您可以根据需要格式化每组3个：

in_groups_of

Answer 3

您可以使用in_groups_of和bootstrap grid system

的组合

<% if @feed_items.any? %>
  <% @feed_items.in_groups_of(3).each do |feeds| %>
    <div class="row">
      <% feeds.each do |feed| %>
        <div class="col-md-4">
          <%= render feed %>
        </div>
      <% end %>
    </div>
  <% end %>
<% end %>

如何使用Ruby on Rails中的Bootstrap Scss来设置帖子列表的样式

3 个答案: