使用 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 怎么样?
最佳答案
使用 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
}
关于html - Bootstrap 列和可变高度段落,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41350076/