使用 {{#each}} 使用动态数据填充流星中的引导表或在引导网格中创建动态列宽

Question

我的问题是this 问题和this 未回答部分的组合。我正在使用 Meteor 并尝试制作一个填充了来自 MongoDB 的动态数据的表或网格，但是我很难找到一种方法来完成我想要的一切。我目前有一个网格，它使用 {{#each}} 标签从 mongo 获取数据，基于 Jim Mack 对第一个链接中问题的回答。这是一些示例代码：

<template name="projectList">
    {{#each projects}}
        {{> projectRow }}
    {{/each}}
</template>

<template name='projectRow'>
    <div class='row span12'>
    <div class="projectRow">
        {{#each row }}
            {{> projectItem}}
        {{/each}}
    </div>
    </div>
</template>

<template name="projectItem">
    <div class="span6 projectItem nameitem"> {{name}}</div>
    <div class="span6 projectItem numberitem">{{number}}</div>
</template>

这很好用并且可以获取所有数据，但是正如第二个链接中所讨论的，列必须是固定宽度，因为根据引导网格文档，动态宽度不是一个选项。如果我使用标签，{{#each}} 将不再起作用，并且我无法弄清楚如何将我的数据放入表中。

有没有人可以从 mongoDB 获取动态数据以填充 Meteor 中的表或其他方式来实现动态宽度列和动态 MongoDB 数据？

Answer 1

如果您想要动态宽度，请不要使用引导类，请使用 flexbox。摆脱引导行，改为使用display = flex 的 div。默认情况下，弯曲方向将设置为行，因此您将完全实现您想要的。然后所有子 div 都将是弹性子元素，因此它们将拥有所需的空间，除非您在它们上设置 flex。