Question

我是一名正在研究我最终项目的学生。下面你将看到我的应用程序的两个屏幕截图。第一个是普通的桌面视图，其中所有内容都正确呈现。当您开始调整视口较小时，项目的位置会变得不均匀，如第二次屏幕截图所示。

我是否错误地将bootfix用于Bootstrap？我尝试将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>

问候。

Answer 1

您需要为解决问题设置以下结构的正文代码。您需要在每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>

Answer 2

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

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

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

由于

Answer 3

<!-- 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;".

Answer 4

问题是你的物体高度不均匀。您正在寻找网格式替代品，因为您希望在调整大小时重新调整这些项目。

我建议在收集容器上使用CSS Flexbox布局。

display: flex;
flex-wrap: wrap;

Here's a demonstration.

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

修改1

值得注意的是，Flexbox属性尚未标准化，但对它们有广泛的支持。

为什么我的Rails集合中的bootstrap clearfix中断了？

4 个答案: