我正在尝试使2个不错的“食物类别”列中填充食物。

到目前为止,这就是我所拥有的。我不知道如何让div彼此相邻。我正在用引导程序制作我的第一个Rails应用程序。

JSFiddle

这是我当前页面的模板代码:

<div class="progress">
  <div class="progress-bar progress-bar-info progress-bar-striped" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em;">
    0%
  </div>
</div>

<h3>List of all Categories</h3><br>

  <% @categories.each_with_index do |category, i| %>
      <div style=""<% if i % 2 == 0 %> class="col-md-offset-1" <% end %> <% if i % 2 == 1 %> class="col-md-offset-7" <% end %>>
      <h4><%= category.name %></h4>
      </div>

      <% category.foods.each do |food| %>
      <div style=""<% if i % 2 == 0 %> class="col-md-offset-2" <% end %> <% if i % 2 == 1 %> class="col-md-offset-8" <% end %>>
        <%= food.name %>
      </div>
      <% end %>
  <% end %>

<hr>
<%= button_to "Start Survey", survey_category_selection_path, class: "pull-right", method: :get %>

最佳答案

您必须将每个类别包装在div中。然后,放置.col-md-6类。因此,每个块将占用宽度的50%。

你会有这样的事情

<div class="progress">
  <div class="progress-bar progress-bar-info progress-bar-striped" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em;">
    0%
  </div>
</div>

<h3>List of all Categories</h3><br>

  <% @categories.each_with_index do |category, i| %>
      <div class="col-md-6">
      <h4><%= category.name %></h4>

      <% category.foods.each do |food| %>
      <div class="col-md-offset-1">
        <%= food.name %>
      </div>
      <% end %>
    </div>
  <% end %>

<hr>
<%= button_to "Start Survey", survey_category_selection_path, class: "pull-right", method: :get %>


JSFiddle

10-05 21:06
查看更多