html - Bootstrap 列和可变高度段落

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
}