LG 和 MD 之间的定位不正确

Question

请看https://mgumerov.github.io/jquery/test.html （会有一些查询https->http，不要被它吓到）

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

但这仍然取决于特定页面，我的意思是，第 1 页可能会被破坏，但第 2 页会正常。

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

Answer 1

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

请看文档：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>

你必须在每 12 列设置一个 clearfix。

在此示例中，您必须每 3 个 div 添加一个仅在 md 上可见的 clearfix。 (md-4 x 3 = 12)

每 4 个 div (lg-3 x 4 = 12) 添加一个仅在 lg 上可见的 clearfix。