Html 使用重叠div和引导设置格式以形成2列

我正在尝试制作两个很好的“食品类别”栏目，其中包含食品

这就是我目前所拥有的。我想不出怎样才能让两个演员挨在一起。我正在用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 %>

0%
所有类别的列表

好的，您要做的是对齐div标记，使它们并排显示：

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

您可能需要选择.inline块而不是div。 请注意，您需要将宽度保持在50%以下，因为您的缩进将使div标记不显示在直线上。 此外，进行媒体查询，以便当页面变小时，div标记将显示为块，而不是内联块

---

希望这能有所帮助。

好的，您要做的是对齐div标记，使它们并排显示：

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

您可能需要选择.inline块而不是div。 请注意，您需要将宽度保持在50%以下，因为您的缩进将使div标记不显示在直线上。 此外，进行媒体查询，以便当页面变小时，div标记将显示为块，而不是内联块

---

希望这有帮助。

您必须将每个类别包装在一个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 %>

0%
所有类别的列表

---

您必须将每个类别包装在一个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 %>

0%
所有类别的列表

---

我尝试过这个方法，但不起作用，我想bootstrap会让页边距一直延伸到边缘？我尝试过这个方法，但不起作用，我想bootstrap会让页边距一直延伸到边缘？你能添加生成的html吗？这将帮助我们找出问题所在。JSFIDLE是最好的。您可以添加生成的html吗？这将帮助我们找出问题所在。JSFIDLE最好。我试过了，但仍然不起作用。现在看起来是这样。我会继续尝试玩它。。。我明白你的意思，我觉得我必须以某种方式利用内联块，但我无法理解。就像我说的，你能给我们生成的html吗？如果没有它，很难告诉您出了什么问题。在我的rails项目中，有许多文件在一起工作，我该如何做这件对您来说很容易的事情？这是为页面生成的html。@Lukeramer感谢html。我已经编辑了我的答案。这正是我想要的，但在我的项目中它看起来像。知道它为什么这么做吗？我试过了，但仍然不起作用。现在看起来是这样。我会继续尝试玩它。。。我明白你的意思，我觉得我必须以某种方式利用内联块，但我无法理解。就像我说的，你能给我们生成的html吗？如果没有它，很难告诉您出了什么问题。在我的rails项目中，有许多文件在一起工作，我该如何做这件对您来说很容易的事情？这是为页面生成的html。@Lukeramer感谢html。我已经编辑了我的答案。这正是我想要的，但在我的项目中它看起来像。知道它为什么这么做吗？