falsche Positionierung zwischen LG und MD

Question

Bitte nehmen Sie sich einen Blick auf https://mgumerov.github.io/jquery/test.html (es werden einige Abfragen HTTPS-> http, oder nicht durch Angst)

In einer Miniaturansicht-Modus, jede Kachel deklariert mit col-sm-4 col-md-3 col-lg-2, und die meiste Zeit und mit den meisten Fenstergrößen verhält es sich gut. Es gibt jedoch einige Fenstergrößen, die das Layout brechen:

Aber nach wie vor, dass abhängig von einer bestimmten Seite, ich meine, 1 Seite ruiniert, aber Seite 2 wird in Ordnung sein.

Also frage ich mich 1) warum die mitgelieferten Stile nicht wie erwartet funktionieren und 2) wie behebe ich das?

Answer 1

Ok, es ist eine clearfix Frage:

Schauen Sie bitte auf der doc: http://getbootstrap.com/css/#grid-responsive-resets

Blick auf diese: http://www.bootply.com/uTgFw9yoTG

Diese mit schlechten Effekt erscheint

<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> 

Das wird gut:

<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> 

Sie müssen alle 12 Farben einen Clearfix setzen.

In diesem Beispiel müssen Sie einen Clearfix hinzufügen, der nur bei md alle 3 div sichtbar ist. (md-4 x 3 = 12)

Und fügen Sie einen Clearfix nur sichtbar auf LG alle 4 div (LG-3 x 4 = 12).