html - 根据浏览器大小的 Bootstrap 3 堆栈网格

Question

我正在为bootstrap设计一个模板

到目前为止我已经完成了this我被两件事困住了

我想随着浏览器窗口的变化而改变列数，如下所示

@media (min-width: 600px) {
#columns {
    -webkit-column-count: 3;
    -moz-column-count: 3;
    column-count: 3;
 }
}
@media (min-width: 800px) {
#columns {
    -webkit-column-count: 4;
    -moz-column-count: 4;
    column-count: 4;
 }
}
@media (min-width: 1000px) {
 #columns {
    -webkit-column-count: 5;
    -moz-column-count: 5;
    column-count: 5;
 }
}

但是如果我使用这段代码，它会产生非常奇怪的行为，除此之外我还想随着窗口大小的变化而改变字体的大小。

那么有没有其他方法可以改变列大小和字体大小呢？

谢谢

Answer 1

花几分钟时间了解 grid Bootstrap 系统。在各种断点处增加列的正确方法是为每个大小添加正确的 Bootstrap 类。尺寸为 xs、sm、md、lg。

所以实现你需要的正确方法是使用网格系统:

3 columns for xs  - .col-xs-4                   because 12/4 = 3
4 columns for sm  - .col-sm-3                   because 12/3 = 3
5 columns for md+ - .col-md-offset-1 .col-md-2  because 10/2 = 5 and padding of 1 column

<div class="section col-xs-4 col-sm-3 col-md-offset-1 col-md-2"></div>

对于字体大小，您需要像最初那样设定适当的宽度，但由于我们使用 Bootstrap 断点，我们也应该将它们用于字体。查看上面的链接我们可以看到我们需要的媒体查询:

.section {font-size: 12px}    /* anything below 750 */

@media (min-width: 750px)  { .section {font-size: 14px} }

@media (min-width: 970px)  { .section {font-size: 16px} }

@media (min-width: 1170px) { .section {font-size: 18px} }