Question

我正在尝试制作2个包含食物的“食物类别”栏目。

这是我到目前为止所拥有的。我无法弄清楚如何让divs彼此相邻。我正在使用bootstrap创建我的第一个rails应用程序。

以下是我目前为该页面提供的模板代码：

<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课程。因此每个块将占据宽度的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

Answer 2

好的，你要问的是对齐div标签，使它们并排出现：

    div {
        width: 48%;
        display: inline-block;
    }

您可能希望选择.inline-block而不是div。请注意，您需要保持宽度小于50％，因为缩进将使div标签不显示为line。此外，进行媒体查询，以便当页面变小时，div标签将显示为块，而不是内联块。

希望这会有所帮助。

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

2 个答案: