Неправильное расположение между LG и MD

Question

Пожалуйста, обратите внимание на https://mgumerov.github.io/jquery/test.html (там будут какие-то запросы https-> HTTP, вы не пугайтесь ею)

В качестве эскизов режим просмотра, каждая плитка объявлена с col-sm-4 col-md-3 col-lg-2, и большую часть времени и с большинством размеров окон он ведет себя хорошо. Однако есть некоторые размеры окна, которые нарушают расположение:

Но все это зависит от конкретной страницы, я имею в виду, страница 1 может получить разрушена, но страница 2 будет в порядке.

Так что я задаюсь вопросом: почему поставляемые стили не работают должным образом и 2) как я могу это исправить?

Answer 1

Хорошо, Это clearfix вопрос:

Пожалуйста, посмотрите на документ: http://getbootstrap.com/css/#grid-responsive-resets

Посмотрите на это: http://www.bootply.com/uTgFw9yoTG

Это будет отображаться с плохим эффектом

<div class="container"> 
    <div class="col-xs-12 col-md-4 col-lg-3">col</div> 
    <div class="col-xs-12 col-md-4 col-lg-3">col</div> 
    <div class="col-xs-12 col-md-4 col-lg-3">col</div> 
    <div class="col-xs-12 col-md-4 col-lg-3">col</div> 
    <div class="col-xs-12 col-md-4 col-lg-3">col</div> 
    <div class="col-xs-12 col-md-4 col-lg-3">col</div> 
</div> 

Это будет хорошо:

<div class="container bis"> 
    <div class="col-xs-12 col-md-4 col-lg-3">col</div> 
    <div class="col-xs-12 col-md-4 col-lg-3">col</div> 
    <div class="col-xs-12 col-md-4 col-lg-3">col</div> 
    <div class="clearfix visible-md"></div> 
    <div class="col-xs-12 col-md-4 col-lg-3">col</div> 
    <div class="clearfix visible-lg"></div> 
    <div class="col-xs-12 col-md-4 col-lg-3">col</div> 
    <div class="col-xs-12 col-md-4 col-lg-3">col</div> 
</div> 

Необходимо установить clearfix каждые 12 колод.

В этом примере вам нужно добавить clearfix, видимое только на md каждые 3 div. (md-4 x 3 = 12)

И добавьте clearfix, видимый только на lg каждые 4 div (lg-3 x 4 = 12).