2.4 响应式列布局

bulma默认就是响应式的。在容器一节介绍了不同设备上默认的宽度,下面将会介绍一些更详细的使用方式。

1、不同设备列布局容器

默认情况下,列只在 平板(tablet) 及以上激活,这意味着列在 移动设备 上是堆叠的,也就是一行只显示一个列,列自动变成了行。 如果您希望也在 移动设备(mobile) 上也一行显示几个列,只需要在 columns 容器上添加 is-mobile 修饰符。

如果你只想在 桌面(desktop) 以上显示列,只需要在 columns 容器上添加 is-desktop 修饰符即可:

效果大家自己在不同设备上看吧,第一个是is-mobile,第二个是is-desktop,代码只给出了第一个,就差一个单词,就不重复了。

<div class="columns is-mobile">
<div class="column">
<p class="bd-notification is-primary">Column</p>
</div>
<div class="column">
<p class="bd-notification is-primary">Column</p>
</div>
<div class="column">
<p class="bd-notification is-primary">Column</p>
</div>
<div class="column">
<p class="bd-notification is-primary">Column</p>
</div>
<div class="column">
<p class="bd-notification is-primary">Column</p>
</div>
<div class="column">
<p class="bd-notification is-primary">Column</p>
</div>
</div>


Column

Column

Column

Column

Column

Column

Column

Column

Column

Column

Column

Column

2、不同断点的列尺寸

你可以为每个设备定义不同的 列大小:mobile(移动设备),tablet(平板设备)和 desktop(桌面设备),如果您希望看到这些类的区别,调整您的浏览器窗口宽度,并查看相同的列在每个断点处的宽度变化。


is-three-quarters-mobile
is-two-thirds-tablet
is-half-desktop
is-one-third-widescreen
is-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">
<p class="bd-notification is-primary">
<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><br>
</p>
</div>
<div class="column">
<p class="bd-notification is-primary">2</p>
</div>
<div class="column">
<p class="bd-notification is-primary">3</p>
</div>
<div class="column">
<p class="bd-notification is-primary">4</p>
</div>
<div class="column">
<p class="bd-notification is-primary">5</p>
</div>
</div>


返回头部

问题反馈
返回顶部