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

花几分钟时间了解bootstrap中的grid系统。在各个断点处增加列的正确方法是为每个大小添加正确的引导类。大小是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>

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

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

Answer 2

您正在使用Bootstrap，因此您应该利用已经内置的CSS。

查看此示例：http://www.tutorialrepublic.com/examples/bin/output.php

在这个例子中，他利用这些类：.col-sm-6 .col-md-4 .col-lg-3来创建流畅的布局。

查看网格系统上的文档并使用它来获得所需的结果。 http://getbootstrap.com/css/#grid

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

2 个答案: