html - 为每两列呈现css引导图像列clearfix的打字稿？

Question

所以我有一些元素有 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，那将是完美的。

我已经为列添加了正确的类，但我不知道如何打印每两列而不是最后一列。

我的打字稿：

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
    }
}

我可以使用任何示例来创建它吗？

Answer 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;
  }
}

在这里，您可以在我的网站和文章中找到更多详细信息。