Typo3 FLUID и Bootstrap 4 "Карта-группа" - PullRequest
Новая
       9

Typo3 FLUID и Bootstrap 4 "Карта-группа"

0 голосов
/ 29 ноября 2018

Я новичок в Fluid и Typo3 и пытаюсь написать свой собственный шаблон-расширение на основе Bootstrap 4. Мне нравятся карты BS4 и я добавил их в качестве contentelement в мой шаблон-расширение без проблем.

Если я сейчас добавлю контент с моей новой карточкой-контентом, я хочу, чтобы этот элемент и все остальные карточки-конверты были обернуты в <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 "card-group".= (

Есть идеи? Я схожу с ума, пару часов сижу за решением. Заранее спасибо,

Крис

1 Ответ

0 голосов
/ 29 ноября 2018

Любой элемент содержимого (CE) ничего не знает о других CE.
В результате каждый CE может только обернуть себя.

Если вы хотите обернуть вокруг нескольких CE, вы должны либо создать контейнерили делайте гадости в javascript.

последний из первых:
вам нужно проанализировать исходный код HTML, а затем удалить обертку между соседними карточками.Поскольку это легко может пойти не так, я бы этого не осознал.Вам нужно удалить </div><div class="card-group">, где закрывающий div также должен быть группой карт класса.очень трудно определить!

Как предположил Филлип: в TYPO3 можно использовать несколько решений container-CEs.
Контейнер CE выполнит внешнюю обертку (<div class="card-group">|</div>).
Содержащиеся CE выполняют суб-рендеринг (<div class="card">|</div>)

CE-контейнеры можно было легко определить с помощью EXT: gridelements, EXT: mask, ...

Другой способ контейнера был бы«столбец страницы».Здесь недостатком является очень статичное расположение.Разметка, как в вашем примере, потребует двух зарезервированных столбцов для карточек.

...