The following example creates a basic grid system that is tiled horizontally on PC and tablet devices and stacked horizontally on small devices such as mobile phones. 提示: 注意: Make sure the columns add up to 12 columns! 8.32.1. Example ¶
<div class="row">
<div class="medium-6 columns" style="background-color:yellow;">
<p>菜鸟教程</p>
</div>
<div class="medium-6 columns" style="background-color:pink;">
<p>菜鸟教程</p>
</div>
</div>
.small|medium|large-*
Class specifies the number of columns to span. So,
.small-1
Span 1 column
.small-4
Span 4 columns
.small-6
Span 6 columns (50% width), and so on.