html - 使用重叠的 div 和 bootstrap 格式化以形成 2 列

Question

我正在尝试制作 2 个漂亮的“食物类别”列，其中填充了食物。

这就是我目前所拥有的。我无法弄清楚如何让 div 彼此相邻。我正在使用 Bootstrap 制作我的第一个 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 %>

Answer 1

您必须将每个类别包装在一个 div 中。然后，你放置 .col-md-6 类。所以每个 block 将占据宽度的 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