bootstrap 偶数网格行

Question

我目前在 3 列中列出数据。这些列的内容在高度上可能会有所不同，我注意到如果高度不是 100% 与此屏幕截图中所示相同，则会创建不均匀的设计：

理想情况下，我希望每一行都保持均匀，以便行保持均匀。这是当前 CSS:

<span v-for="team in teamSet.teams">
    <div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">
        // vuejs templating code
    </div>
</span>

我还没有想出一个方法来用 VueJS 和 bootstrap 来完成这个。有人可以提供任何想法吗？

Answer 1

不知道vue.js在吐槽什么，只能给个不具体的回答：

.container > .direct-child-element:nth-child(3n+1) {
    clear: both
}

".container" 将是列的包装，".direct-child-element" 代表列（直接子元素）。

解释：上面较高的列阻止下面的列继续到 "float over" 因为它只是挡路并清除第一个元素的每一行（由第 nth-child(3n+1) 选择）这样行将始终 "clear" 以上元素并一直浮动。

PS：您提供的代码片段是 HTML 而不是 CSS :)

Answer 2

另一种选择，也是您正在寻找的最佳方法，是使用 flex 显示器，您可以在此 flex guide

获得更多信息

基本上包括使用以下设置容器 CSS:

.flex-container {
  display: flex;
  flex-flow: row wrap;
}

这里有一个例子：simple flex codepen

Flex 非常适合，可以处理很多需求

bootstrap even grid rows