Why does my clearfix bootstrap break in my Rails collection?

Question

I am working on my final project. Below you will see two screenshots of my application. The first is the usual desktop view, where everything is displayed correctly. As you reduce the size of the viewing port, the position of objects becomes uneven, as you can see in the second screenshot.

Am I using clearfix incorrectly for bootstrap? I tried to put clearfix under each car, but then I realized that I checked the Bootstrap documentation that the clearflix class should wrap around the specified elements. Below is my code:

<strong> 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 %> <%= vehicle.year %> <%= vehicle.make %> <%= vehicle.model %></p>
                <%= link_to "View Details", vehicle, class: "item-more" %>
            </div>
          <% end %>
        </div>
      </div>
  </div>
</div>

cycle in question

<!-- 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 %> <%= vehicle.year %> <%= vehicle.make %> <%= vehicle.model %></p>
                <%= link_to "View Details", vehicle, class: "item-more" %>
            </div>
          <% end %>
        </div>
      </div>
  </div>

Sincerely.

Answer 1

javascript clearfix . css. min-height . . . :
  Demo1 - scenerio, demo2 - scenerio. , demo1 2.

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

, , .

Answer 2

. clearfix 2 .

<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. , , . , clearfix class dynamic 2 . , clearfix jquery .

.

, item-layout div. item div. .

<!-- 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 %> <%= vehicle.year %> <%= vehicle.make %> <%= vehicle.model %></p>
                <%= link_to "View Details", vehicle, class: "item-more" %>
            </div>
          <% end %>
        </div>
      </div>
  </div>

jquery <span class="clearfix visible-lg-block"></span> clearfix.

<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 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 %> <%= 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 is a demo.

Another problem (as HarnishDesign noted) is that using clearfix is ​​wrong. He puts everything after a whole new line, because he uses the rule clear: both. Read the clear rule here .

Change 1

It is worth noting that Flexbox features are not yet standardized, but there is wide support for them.