引导甚至网格行

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

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

获取更多信息

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

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

以下是一个示例：simple flex codepen

Flex非常适合，可以满足许多要求

Answer 2

不知道什么是vue.js吐出来的，我只能给出一个非特定的答案：

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

“。container”将成为列的包装，“。direct-child-element”表示列（直接子项）。

说明：上面较高的列可以防止下面的列继续“浮动”，因为它只是在路上并清除第一个元素（由nth-child（3n + 1）选择）的每一行使得它如此行总是“清除”上面的元素并一直浮动。

PS：您提供的代码段是HTML而不是CSS：）