Typo3 FLUID 和 Bootstrap 4 "card-group"

Question

我是 Fluid 和 Typo3 的新手，正在尝试基于 Bootstrap 编写自己的模板扩展 4. 我喜欢 BS4 的卡片并将它们作为内容元素添加到我的模板扩展中，没有问题。

如果我现在使用我的新卡片内容元素添加内容，我希望将此元素和所有其他卡片内容元素包装成 <div class="card-group> ... card div and other card-stuff ... </div> 或更好，我需要以下结构：

<div class="card-group">
    <div class="card">
        CARD ONE
    </div>
</div>

<div class="container">
    OTHER CONTENT-ELEMENTS
</div>

<div class="card-group">
    <div class="card">
        CARD TWO
    </div>

    <div class="card">
        CARD THREE
    </div>
</div>

如你所见，我想将一个或多个card-content-elements包裹成一个"card-group" div.

但我不知道如何在我的布局、模板或错字中执行此操作。我得到的唯一结果是，每张卡片都包裹在自己的 "card-group" div 中。 =(

有什么想法吗？我快疯了，坐了几个小时寻求解决方案。提前致谢，

克里斯

Answer 1

任何内容元素 (CE) 对其他 CE 都一无所知。
结果每个 CE 只能包装自己。

如果你想要环绕多个 CE，你要么必须构建一个容器，要么在 javascript.

中做一些令人讨厌的事情

最后一个在先：
您必须分析 HTML-source end 删除相邻卡片之间的环绕。由于这很容易出错，我不会意识到这一点。您需要删除一个 </div><div class="card-group">，其中结束 div 也需要是一个 class 卡组。很难识别！

正如 Phillip 所建议的：在 TYPO3 中有多种解决方案可以使用 container-CEs。
容器 CE 将做外包装 (<div class="card-group">|</div>)。
包含的 CE 进行子渲染 (<div class="card">|</div>)

可以使用 EXT:gridelements、EXT:mask、...

轻松定义容器 CE

另一种容器方式是"page column"。这里的缺点是非常静态的布局。像您的示例这样的标记需要两个卡片保留列。

Typo3 FLUID 和 Bootstrap 4 "card-group"

Typo3 FLUID and Bootstrap 4 "card-group"

php

typo3

fluid

typoscript

bootstrap-4