Bootstrap将两列布局转换为四列布局

Question

如果我在桌面上有两列，我可以在平板电脑视图中将这两列转换为四列。

<div class="row">
<div class="col-sm-6"></div>
<div class="col-sm-6"></div>
</div>

如果无法使用bootstrap，是否可以使用Tables？

Answer 1

将您的div类更改为"col-xs-3"并分配宽度和高度。

JSFiddle here

完整代码：

HTML

<div class="row">
<div class="col-xs-3">div</div>
<div class="col-xs-3">div</div>
<div class="col-xs-3">div</div>
<div class="col-xs-3">div</div>
</div>

CSS

div {border: 2px black solid; width:100%;}

查看名为'Scaffolding'

的技术

Boostrap 3还为网格系统和媒体查询提供了全新的功能，请查看此blog post

Answer 2

<div class="row">
<div class="col-sm-3"></div>
<div class="col-sm-3"></div>
<div class="col-sm-3"></div>
<div class="col-sm-3"></div>
</div>