Html 使用Aurelia动态创建另一行图像

我正在使用HTML、Cordova、Aurelia和Bootstrap创建一个移动应用程序。该应用程序能够上传图像并创建一行缩略图。因为这是我第一次使用Aurelia，所以挑战在于我需要一行只包含4个图像。我需要让应用程序在当前行到达第四个图像后创建一行新图像。我在网上搜索解决方案，但除了我可能需要合并一个值转换器之外，没有找到任何适合我需要的解决方案。有人知道我将如何完成这项任务吗？如蒙协助，将不胜感激。我在下面包含了我的原始代码，这与我知道必须动态创建其他行之前的代码非常相似

<div class="row">
    <div class="col-sm-3" repeat.for="image of images">
        <div class="thumbnail">
            <img src.bind="image | blobToUrl" />
            <div class="caption text-center">                                                             
                <button type="button" class="btn btn-default" click.trigger="setCoverPhoto($index)" data-toggle="tooltip" title="Use as cover">Set Cover</button>
                <button type="button" class="btn btn-default" click.trigger="removeAttachment($index)" data-toggle="tooltip" title="Remove photo">Remove</button>
            </div>
        </div>
    </div>
</div>

封面
去除

---

谢谢你的帮助

我把你的代码放在这里：

对我来说，它看起来很好

引导是有响应的，所以你不能“锁定”每行4个图像。在一定的屏幕宽度下，它将变成每行一个图像

---

您可以在

app.js

中使用图像数组中的维度来查看bootstrap将如何处理不同的事情。

我将您的代码放在这里：

对我来说，它看起来很好

引导是有响应的，所以你不能“锁定”每行4个图像。在一定的屏幕宽度下，它将变成每行一个图像

---

您可以在

app.js

中使用图像数组中的维度来查看bootstrap将如何处理不同的事情。

Ashley的答案在这种情况下是正确的。 但是，有时可能需要使用包含x个列表项的包装元素呈现列表。 您可以通过将列表分组并迭代两次来解决此问题。一旦在分组列表中，在这个循环中，子列表上的另一个循环。

---

如果此分组列表仅用于UI目的，则不应污染VM，因此它属于转换器。示例：

在这种情况下，Ashley的答案是正确的。 但是，有时可能需要使用包含x个列表项的包装元素呈现列表。 您可以通过将列表分组并迭代两次来解决此问题。一旦在分组列表中，在这个循环中，子列表上的另一个循环。

---

如果此分组列表仅用于UI目的，则不应污染VM，因此它属于转换器。示例：

谢谢您的回复。谢谢您的回复。谢谢您的回复。我将进一步研究您的建议，因为似乎依赖引导来完成这项工作对于如何包装图像来说是不可预测的。我需要一些更明确和一致的东西。谢谢你的回复。我将进一步研究您的建议，因为似乎依赖引导来完成这项工作对于如何包装图像来说是不可预测的。我需要一些更明确、更一致的东西。