html - Bootstrap 中的响应式交错行

Question

我正在开发这样的界面:

http://codepen.io/clemeeent/pen/NPPEzE

  O O O O O O O 
 O O O O O O O O
  O O O O O O O

所以交错排列。我尝试将其作为基本 Bootstrap 行并将其居中。它们的长度不同，这有点起作用......

<div class="row">
    <div class="col-md-10 centered">
         <div class="day"></div>
         <div class="day"></div>
         <div class="day"></div>
         <div class="day"></div>
    </div
</div>
...

问题是，由于行数而减少窗口时，它看起来什么都没有...我应该尝试某种js脚本来切换下一个.row中的.day...？我想不出任何解决方案来获得交错元素的流体网格......

在移动 View 中，它应该如下所示:

  O O
 O O O
  O O
 O O O

任何想法将不胜感激!

Answer 1

我唯一能想到的(不涉及大量 JavaScript 计算)是消除行并使用 nth-child 进行大量媒体查询。

本质上，为每个奇数行的起始成员提供左边距和清晰的左侧，并为每个偶数行的开头提供清晰的左侧。菜单不会顺利重排，这取决于您愿意放置多少个断点。

以下是从 400 像素重排到 900 像素的三个媒体查询的示例 Codepen example

我所做的示例:

@media (max-width: 550px) {  
  .day:nth-child(5n + 1) { /*odd rows*/
    clear: left;
    margin-left: 60px; /*half the width of .day + existing margin*/
    background: red;
  }
  .day:nth-child(5n + 3) { /*even rows*/
    clear: left; 
  }
}

我给每个奇数行的第一行设置了背景颜色以显示发生的情况。如果您愿意编写更多媒体查询，您可以获得相当平滑的重排，或者只需调整包含的 div 的大小并将其居中。