为什么我的引导程序 clearfix 在我的 Rails 集合中中断？答案

【问题标题】：Why is my bootstrap clearfix breaking in my Rails collection?为什么我的引导程序 clearfix 在我的 Rails 集合中中断？
【发布时间】：2016-01-22 06:44:30
【问题描述】：

我是一名正在完成我的期末项目的学生。下面您将看到我的应用程序的两个屏幕截图。第一个是正常的桌面视图，一切都正确呈现。当您开始将视口调整为较小时，项目的位置变得不均匀，如您在第二个屏幕截图中所见。

我是否为 Bootstrap 错误地使用了 clearfix？我试图将 clearfix 放置在每辆车的下方，但随后通过检查 Bootstrap 文档意识到 clearflix 类必须环绕所述项目。以下是我的代码：

车辆/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>

问候。

【问题讨论】：

您错误地使用了.clearfix。此类的主要和最常见的用途是在所有具有float:left 属性的元素之后放置一个空的<div class="clearfix"></div>。我建议完全删除.clearfix 并搜索如何使您的.col-sm-6 具有相同的高度。看看here，您可能会发现提供的答案很有帮助。

标签： css ruby-on-rails twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

问题是您的对象高度不均匀。鉴于您希望这些项目在调整大小时重排，您正在寻找网格样式的替代品。

我建议在您的集合容器上使用 CSS Flexbox 布局。

display: flex;
flex-wrap: wrap;

Here's a demonstration.

另一个问题（如 HarnishDesign 所述）是您对 clearfix 的使用不正确。因为它使用clear: both 规则，所以它将所有内容放在一个全新的行之后。阅读明确的规则here。

编辑 1

值得注意的是，Flexbox 属性还没有标准化，但它们得到了广泛的支持。

【讨论】：

【解决方案2】：

<!-- Body Column -->
  <div class="col-sm-9">
      <div class="row">
        <div class="clearfix">
          <% @vehicles.each do |vehicle| %>
            <div class="col-sm-6 bottom" style="display: -webkit-flex;display: flex;">
              <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>

add this style="display: -webkit-flex;display: flex;".

【讨论】：

【解决方案3】：

无需添加太多的 javascript 和 clearfix 等等。我们只需要在 css 中进行调整。您只需将min-height 添加到项目中。一切都会得到解决。我为你创造了一个小提琴。在小提琴中：
Demo1 是你的场景，demo2 是固定的场景。尝试调整视口大小以查看 demo1 和 demo 2 的效果。

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

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

谢谢

【讨论】：

【解决方案4】：

您需要使用以下结构设置正文代码以解决问题。您需要在每 2 项之后添加 clearfix 类。

<div class="col-sm-9">
      <div class="row">
        <div class="item-layout">
            <div class="item">Your content</div>
            <div class="item">Your content</div>
            <span class="clearfix visible-lg-block"></span>
            <div class="item">Your content</div>
            <div class="item">Your content</div>
            <span class="clearfix visible-lg-block"></span>
            <div class="item">Your content</div>
            <div class="item">Your content</div>
            <span class="clearfix visible-lg-block"></span>
            <div class="item">Your content</div>
            <div class="item">Your content</div>
            <span class="clearfix visible-lg-block"></span>
        </div>
      </div>
  </div>

根据您的代码，您在每行中设置了 2 列（2 项）。因此，您需要在每 2 项之后添加 clearfix 类。但是，在这里，您的代码是动态的，带有循环。因此，在这里，您需要每 2 项添加 clearfix 类动态。因此，您将根据屏幕视图添加带有 jquery 的动态 clearfix 类。

尝试使用您的代码按照说明进行操作。

首先，在您的主项目 div 中添加 item-layout 类。另外，在循环 div 中添加 item 类。下面的例子。

<!-- Body Column -->
  <div class="col-sm-9">
      <div class="row">
        <div class="item-layout">
          <% @vehicles.each do |vehicle| %>
            <div class="col-sm-6 bottom item">
              <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>

另外，添加以下 jquery 为 clearfix 添加动态 <span class="clearfix visible-lg-block"></span>。

<script type="text/javascript">
$(document).ready(function(){
$screensize = $(window).width();
    if ($screensize > 1199) {
        $(".item-layout > .clearfix").remove();
        $('.item-layout .item:nth-child(2n)').after('<span class="clearfix visible-lg-block"></span>');
    }
    if ($screensize < 1199) {
        $(".item-layout > .clearfix").remove();
        $('.item-layout .item:nth-child(2n)').after('<span class="clearfix visible-lg-block visible-md-block"></span>');
    }
    if ($screensize < 991) {
        $(".item-layout > .clearfix").remove();
        $('.item-layout .item:nth-child(2n)').after('<span class="clearfix visible-lg-block visible-sm-block"></span>');
    }
$( window ).resize(function() {
    $screensize = $(window).width();
    if ($screensize > 1199) {
        $(".item-layout > .clearfix").remove();
        $('.item-layout .item:nth-child(2n)').after('<span class="clearfix visible-lg-block"></span>');
    } 
    if ($screensize < 1199) {
        $(".item-layout > .clearfix").remove();
        $('.item-layout .item:nth-child(2n)').after('<span class="clearfix visible-lg-block visible-md-block"></span>');
    }
    if ($screensize < 991) {
        $(".item-layout > .clearfix").remove();
        $('.item-layout .item:nth-child(2n)').after('<span class="clearfix visible-lg-block visible-sm-block"></span>');
    }
    if ($screensize < 767) {
        $(".item-layout > .clearfix").remove();
    }
});
});
</script>

【讨论】：

对于 Ruby on Rails 应用程序中的一个非常常见的问题，这是一个非常好的主意，我们使用块函数通过多个引导类对对象进行分页，例如 col-xs-12 col-sm-6 col-md-4因为我们将根据屏幕大小在不同的地方需要clearfix。创建min-height css 规则并不总能带来美观的网页设计。