LG和MD之间的定位不正确

Question

请查看https://mgumerov.github.io/jquery/test.html （会有一些查询https-＆gt; http，不要害怕它）

在缩略图视图模式下，每个图块都使用col-sm-4 col-md-3 col-lg-2声明，并且大部分时间和大多数窗口尺寸都表现良好。但是有些窗口大小会破坏布局：

但是这仍然取决于特定的页面，我的意思是，第1页可能会毁了，但第2页就可以了。

所以我想知道1）为什么提供的样式不能按预期工作; 2）我该如何解决？

Answer 1

好的，这是一个明确的问题：

请查看文档：{​​{3}}

看看这个：http://getbootstrap.com/css/#grid-responsive-resets

这将显示效果不佳

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

您必须每12个字符串设置一个clearfix。

在这个例子中，你必须添加一个只在md每3 div上可见的clearfix。 （md-4 x 3 = 12）

并且每4个div（lg-3 x 4 = 12）添加一个仅在lg上可见的clearfix。