广州市天河区天河路621号天娱广场西塔10楼
EAIC界面库
移动版
缺省情况下，网格是针对平板版的，对于手机版，请添加
.is-mobile类
<div class="columns is-mobile">
<div class="column">
1
</div>
<div class="column">
2
</div>
<div class="column">
3
</div>
<div class="column">
4
</div>
</div>
1
2
3
4
改变大小
为了看到不同设备上的效果，请调整浏览器的大小以观察代码效果
如果只想看到PC版效果，只需要添加
.is-desktop类
<div class="columns is-desktop">
<div class="column">
1
</div>
<div class="column">
2
</div>
<div class="column">
3
</div>
<div class="column">
4
</div>
</div>
1
2
3
4
列换行大小
在不同设备上，列可能会被折叠到下一行，可以为列单独指定设备类来控制列在不同设备下的折叠效果
is-three-quarters-mobileis-two-thirds-tabletis-half-desktopis-one-third-widescreenis-one-quarter-fullhd
2
3
4
5
<div class="columns is-mobile">
<div class="column is-three-quarters-mobile is-two-thirds-tablet is-half-desktop is-one-third-widescreen is-one-quarter-fullhd">
<code>is-three-quarters-mobile</code><br>
<code>is-two-thirds-tablet</code><br>
<code>is-half-desktop</code><br>
<code>is-one-third-widescreen</code><br>
<code>is-one-quarter-fullhd</code>
</div>
<div class="column">
2
</div>
<div class="column">
3
</div>
<div class="column">
4
</div>
<div class="column">
5
</div>
</div>
