Rails视图用户图表布局调整：第4个图表需采用不同布局展示

嘿，我来帮你搞定这个布局需求！你现在是想让前3个图表保持col-md-4的三列布局，第4个图表单独放在它们下方，用不同样式对吧？这里有两种简单的实现方式：

方法1：用each_with_index判断位置 #

利用Ruby的each_with_index方法给每个图表加上索引，当索引为3（集合从0开始计数，第4个元素的索引是3）时，渲染不同的布局：

<div class="row">
  <div class="container">
    <% @user_overviews.each_with_index do |overview, index| %>
      <% if index == 3 %>
        <!-- 第4个图表：单独一行，自定义布局 -->
        <div class="col-md-12 text-center mt-4">
          <h4><%= overview.title %></h4>
          <%= raw overview.graph %>
        </div>
      <% else %>
        <!-- 前3个图表保持原三列布局 -->
        <div class="col-md-4 text-center">
          <h4><%= overview.title %></h4>
          <%= raw overview.graph %>
        </div>
      <% end %>
    <% end %>
  </div>
</div>

这里给第4个图表用了col-md-12让它占满整行，还加了mt-4的margin-top类和上面的图表拉开间距。你可以根据需求替换成其他Bootstrap列类（比如col-md-8 offset-md-2让它居中且宽度更窄），或者自定义CSS类调整样式。

方法2：拆分集合，分开渲染 #

如果觉得索引判断不够直观，也可以直接把@user_overviews拆分成前3个和第4个两部分，分开处理：

<div class="row">
  <div class="container">
    <!-- 渲染前3个图表 -->
    <% @user_overviews.first(3).each do |overview| %>
      <div class="col-md-4 text-center">
        <h4><%= overview.title %></h4>
        <%= raw overview.graph %>
      </div>
    <% end %>

    <!-- 渲染第4个图表（先判断是否存在） -->
    <% if @user_overviews.size >= 4 %>
      <div class="col-md-12 text-center mt-4">
        <h4><%= @user_overviews[3].title %></h4>
        <%= raw @user_overviews[3].graph %>
      </div>
    <% end %>
  </div>
</div>

这种方式逻辑更清晰，而且加了size >=4的判断，避免当用户图表数量不足4个时出现报错。

你可以根据自己的代码风格选择其中一种方法，两种都能完美实现你要的效果～

内容的提问来源于stack exchange，提问作者Slowboy