Typo3 FLUID和Bootstrap 4“卡組”

Question

我是Fluid和Typo3的新手，並嘗試基於Bootstrap 4編寫自己的模板擴展。我喜歡BS4的卡，並將它們作為內容元素毫無問題地添加到我的模板擴展中。

如果現在使用新的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中。 =（

有任何想法嗎？ 我瘋了，坐了幾個小時來解決。 提前致謝，

克里斯

Answer 1

任何內容元素（CE）都不了解其他CE。
結果，每個CE只能包裝自己。

如果要包裝多個CE，則必須構建一個容器或使用javascript進行討厭的操作。

最后一個優先：
您必須分析HTML源端，刪除相鄰卡之間的包裝。 因為這很容易出錯，所以我不會意識到。 您需要刪除</div><div class="card-group"> ，其中結束div也必須是class card-group。 很難識別！

---

正如Phillip所建議的：在TYPO3中有多種使用container-CEs解決方案。
容器CE將進行外部包裝（ <div class="card-group">|</div> ）。
包含的CE進行子渲染（ <div class="card">|</div> ）

可以使用EXT：gridelements，EXT：mask等輕松定義容器CE。

---

容器的另一種方式是“頁面列”。 這里的缺點是布局非常靜態。 像您的示例這樣的標記將需要兩個保留列用於卡。