css - 为什么我的 Bootstrap clearfix 在我的 Rails 集合中中断？

Question

我是一名学生，正在进行我的期末元素。下面您将看到我的应用程序的两个屏幕截图。第一个是正常的桌面 View ，其中所有内容都正确呈现。当您开始将视口(viewport)调整得更小时，元素的位置变得不均匀，如您在第二个屏幕截图中所见。

我是否错误地为 Bootstrap 使用了 clearfix？我试图将 clearfix 放在每辆车下面，但后来通过检查 Bootstrap 文档意识到 clearflix 类必须环绕所述元素。下面是我的代码:

vehicles/index.html.erb

<div class="row">


<!-- Side Column -->
  <div class="col-sm-3">
    <h3 class="item-category">Make: </h3>
    <ul class="side-menu">
      <%= form_tag filter_vehicles_path do |f| %>
        <% Vehicle.makes.each do |make| %>
            <li>
              <%= display_chosen_check_box_tag(make, params[:makes], "makes[]") -%>
              <%= make -%>
            </li>
        <% end %>

  <h3 class="item-category">Year: </h3>
        <% Vehicle.year_ranges.each do |range| %>
            <li>
              <%= display_chosen_check_box_tag(range, params[:years], "years[]") -%>
              <%= range -%>
            </li>
        <% end %>

        <li><%= submit_tag "Filter" %></li>
      <% end %>
    </ul>
  </div>

  <!-- Body Column -->
  <div class="col-sm-9">
      <div class="row">
        <div class="clearfix">
          <% @vehicles.each do |vehicle| %>
            <div class="col-sm-6 bottom">
              <h3 class="item-title"><%= link_to "#{vehicle.make} #{vehicle.model}", vehicle %></h3>
                <%= image_tag(vehicle.primary_image.image_url, class: "img-responsive") if vehicle.primary_image %>
                <p class="index-info"><%= vehicle.user.name %>'s <%= vehicle.year %> <%= vehicle.make %> <%= vehicle.model %></p>
                <%= link_to "View Details", vehicle, class: "item-more" %>
            </div>
          <% end %>
        </div>
      </div>
  </div>
</div>

有问题的循环

<!-- Body Column -->
  <div class="col-sm-9">
      <div class="row">
        <div class="clearfix">
          <% @vehicles.each do |vehicle| %>
            <div class="col-sm-6 bottom">
              <h3 class="item-title"><%= link_to "#{vehicle.make} #{vehicle.model}", vehicle %></h3>
                <%= image_tag(vehicle.primary_image.image_url, class: "img-responsive") if vehicle.primary_image %>
                <p class="index-info"><%= vehicle.user.name %>'s <%= vehicle.year %> <%= vehicle.make %> <%= vehicle.model %></p>
                <%= link_to "View Details", vehicle, class: "item-more" %>
            </div>
          <% end %>
        </div>
      </div>
  </div>

问候。

Answer 1

不需要添加太多的 javascript 和 clearfix 等等。我们只需要在 css 中进行调整。 你只需要添加 min-height 到元素。一切都会迎刃而解。我为你创建了一个 fiddle 。 fiddle :
Demo1 是您的场景，demo2 是固定场景。 尝试调整视口(viewport)大小以查看对演示 1 和演示 2 的影响。

https://jsfiddle.net/Anuj_Kumar/sc17mzkp/1/

如果您的问题仍未解决，请告诉我，我也会解决。

谢谢