Typoscript для рендеринга исправления столбца изображения начальной загрузки css для каждых двух столбцов?

Итак, у меня есть несколько элементов с 6 столбцами изображений с подписями к каждому изображению. Некоторые подписи крупнее других, из-за чего разрывы строк на мобильных устройствах выглядят не очень хорошо.

Bootstrap имеет эту опцию для очистки только необходимого окна просмотра:

<div class="row">

    <div class="col-xs-6 col-sm-2">.col-xs-6 .col-sm-2</div>
    <div class="col-xs-6 col-sm-2">.col-xs-6 .col-sm-2</div>

    <!-- Add the extra clearfix for only the required viewport -->
    <div class="clearfix visible-xs-block"></div>

    <div class="col-xs-6 col-sm-2">.col-xs-6 .col-sm-2</div>
    <div class="col-xs-6 col-sm-2">.col-xs-6 .col-sm-2</div>

    <!-- Add the extra clearfix for only the required viewport -->
    <div class="clearfix visible-xs-block"></div>

    <div class="col-xs-6 col-sm-2">.col-xs-6 .col-sm-2</div>
    <div class="col-xs-6 col-sm-2">.col-xs-6 .col-sm-2</div>
</div>

Если бы я мог каким-то образом напечатать такой HTML-код с помощью typoscript, это было бы идеально.

Typoscript, который у меня есть, уже добавляет правильные классы для столбцов, но я понятия не имею, как печатать каждые два столбца, а не последний.

Мой типотекст:

addClassesCol.ifEmpty = 
addClassesCol.override.cObject = COA
addClassesCol.override.cObject {
    10 = CASE
    10 {
        key.field = imagecols

        default = TEXT
        default.value = col-md-12

        2 < .default
        2.value = col-sm-6 

        3 < .default
        3.value = col-sm-4 col-xs-6

        4 < .default
        4.value = col-sm-3 col-xs-6

        6 < .default
        6.value = col-sm-2 col-xs-6
    }
}

Любые примеры, которые я могу использовать, чтобы создать это?


person mvetter    schedule 01.08.2014    source источник
comment
Вы можете попробовать prepend и append. Подробнее здесь: docs.typo3.org/typo3cms/TyposcriptReference/Functions/ Стандартная упаковка/   -  person nstungcom    schedule 13.08.2014


Ответы (1)


Если у вас есть 3 столбца в строке, примените clear:both к каждому третьему элементу.

Учитывая такой HTML,

.row.apps
  .col-xs-6.col-sm-4.app-container
    .app

применить этот CSS

.app-container:nth-child(2n+1) {
  clear: both;
}

@media only screen and (min-width: $screen-sm){
  .app-container:nth-child(3n+1) {
    clear: both;
  }
}

Здесь вы можете найти более подробную информацию о моем сайте и статье.

person ahnbizcad    schedule 11.11.2014