Question

我正在制作一个布局方面遇到麻烦。我正在处理从我的数据库生成的内容块，所以我基本上最终得到：

<div class="container">
  <div class="row">
    <div class="col-sm-6 col-lg-4 record"></div>
    <div class="col-sm-6 col-lg-4 record"></div>
    <div class="col-sm-6 col-lg-4 record"></div>
    <div class="col-sm-6 col-lg-4 record"></div>
    <div class="col-sm-6 col-lg-4 record"></div>
    <div class="col-sm-6 col-lg-4 record"></div>
    ... etc

问题是，当列浮动时，如果内容比另一个更多，它们最终会堆叠在彼此之上。

我知道技术上我应该使用这样的行：

<div class="container">
  <div class="row">
    <div class="col-sm-6 col-lg-4 record"></div>
    <div class="col-sm-6 col-lg-4 record"></div>
  </div>
  <div class="row">
    <div class="col-sm-6 col-lg-4 record"></div>
    <div class="col-sm-6 col-lg-4 record"></div>
  </div>
  <div class="row">
    <div class="col-sm-6 col-lg-4 record"></div>
    <div class="col-sm-6 col-lg-4 record"></div>

显然，在较大的屏幕上，我需要每行三个元素。

有没有办法绕过这个或CSS规则我可以添加以清除浮动元素并保持所有内容都在lg和sm断点处排队？

演示： http://codepen.io/EightArmsHQ/pen/RWoMmM

Answer 1

您可以添加以下内容：

/* On medium screens, clear every 2 elements starting at 3rd element */
@media(min-width: 768px) and (max-width: 1199px){
  .row > div:nth-child(2n+3){
    clear: both;
  }
}

/* On large screens, clear every 3 elements starting at 4th element */
@media(min-width: 1200px){
  .row > div:nth-child(3n+4){
    clear: both;
  }
}

Bootstrap在断点处更改列号

1 个答案: