响应式的列

列布局对于每个断点有不同的处理

Mobile columns | 移动列 #

默认情况下，列只在 tablet-平板 及以上视口激活，这意味着列在 移动设备 上是堆叠的。
如果您希望也在 mobile-移动设备 上也生效，只需要在 columns 容器上添加 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>

调整浏览器尺寸

如果你想查看其中的区别，请调整浏览器的大小查看列什么时候堆叠，什么时候水平分布。

如果你只想在 desktop-桌面 以上显示列，只需要在 columns 容器上添加 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>

Different column sizes per breakpoint | 每个断点的列大小 #

你可以为每个视口定义 列大小：mobile（移动设备），tablet（平板设备）和 desktop（桌面设备）

is-half-mobile
is-one-third-tablet
is-one-quarter-desktop

调整浏览器尺寸

如果您希望看到这些类的区别，调整您的浏览器窗口，并查看相同的列在每个断点处的宽度变化。

<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>
    <code>is-one-third-widescreen</code>
    <code>is-one-quarter-fullhd</code>
  </div>
  <div class="column">1</div>
  <div class="column">1</div>
</div>

响应式的列

列布局对于每个 断点 有 不同 的处理

Mobile columns | 移动列 #

Different column sizes per breakpoint | 每个断点的列大小 #

列布局对于每个断点有不同的处理