引导3堆电网

Question

我设计为引导模板

到目前为止，我已经做了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系统。在各个断点处增加列的正确方法是为每个大小添加正确的引导类。大小是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} } 

Answer 2

您使用的引导，所以你应该已经内置在CSS的优势

看看这个例子：http://www.tutorialrepublic.com/examples/bin/output.php

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

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