我正在尝试使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