引导列和可变高度段落

Question

使用 Bootstrap 3.3.7 并尝试将 17 段可变高度流入 3 列 (col-md-4) 布局以实现高分辨率、2 列 (col-sm-6) 或 1 列 (col-xs -12)。无论是三列还是两列，我都希望最终的布局能够产生接近相同高度的列。由于段落源不是静态的，因此尝试创建灵活的布局。

我试过了：

<p class="col-md-4 col-sm-6 col-xs-12">...</p>

但由于段落的高度可变，因此并没有真正达到我希望的效果。有没有办法让段落在有空间的地方流动而不单独使用 Bootstrap 留下空白？和 Sass 结合怎么样？

Answer 1

使用 CSS 媒体查询并摆脱 Bootstrap 类解决了这个问题。

/* Extra small */
@media (min-width: 480px) {
  .faqs {
    -webkit-column-count: 1;
    -moz-column-count: 1;
    column-count: 1;
  }
}

/* Small */
@media (min-width: 768px) {
  .faqs {
    -webkit-column-count: 2;
    -moz-column-count: 2;
    column-count: 2;
  }
}

/* Medium */
@media (min-width: 992px) {
  .faqs {
    -webkit-column-count: 3;
    -moz-column-count: 3;
    column-count: 3;
  }
}

/* Large */
@media (min-width: 1200px) {
  .faqs {
    -webkit-column-count: 4;
    -moz-column-count: 4;
    column-count: 4;
  }
}

article {
  break-inside: avoid-column; // keep articles together
}