时间戳

首页 > 解决方案 > Typo3 FLUID 和 Bootstrap 4“卡组”

php - Typo3 FLUID 和 Bootstrap 4“卡组”

问题描述

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

如果我现在用我的新 card-contentelement 添加内容，我希望这个元素和所有其他 card-contentelements 被包装到<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>

如您所见，我希望将一个或多个卡片内容元素包装到“卡片组”div 中。

但我不知道如何在我的布局、模板或打字稿中做到这一点。我得到的唯一结果是，每张卡片都包装在自己的“卡片组”div中。=(

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

克里斯

标签： phpbootstrap-4typo3typoscriptfluid

解决方案

任何内容元素 (CE) 都不了解其他 CE。
因此，每个 CE 只能包装自己。

如果你想要一个环绕多个 CE，你要么必须构建一个容器，要么在 javascript 中做一些讨厌的事情。

最后一个首先：
您必须分析 HTML 源端删除相邻卡片之间的包装。由于这很容易出错，我不会意识到这一点。您需要删除一个</div><div class="card-group">关闭div也需要是类卡组的地方。非常难辨认！

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

可以使用 EXT:gridelements, EXT:mask, ... 轻松定义容器 CE

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

推荐阅读