Bulma Columns 完整参考

Bulma 是一个轻量级，现代化 CSS 框架，提供了一种简单明了的方式来构建响应式网站。其中 Columns 是其中最为实用和常用的类之一，本文将介绍 Bulma Columns 类的完整参考。

基础 Columns

Bulma的基础 columns 包括一个 columns 容器和多个 column 列。每个 column 列需要包含在 columns 容器中。

<div class="columns">
  <div class="column"></div>
  <div class="column"></div>
  <div class="column"></div>
</div>

不同列的宽度

Bulma columns 类提供了不同列宽度的选项。如果您想要三个相等的列，可以使用以下代码：

<div class="columns">
  <div class="column"></div>
  <div class="column"></div>
  <div class="column"></div>
</div>

如果您想要两个 25% 宽度的列和一个 50% 宽度的列，可以使用以下代码：

<div class="columns">
  <div class="column is-2"></div>
  <div class="column is-2"></div>
  <div class="column is-8"></div>
</div>

如果您想要两个 33% 宽度的列和一个 34% 宽度的列，可以使用以下代码：

<div class="columns">
  <div class="column"></div>
  <div class="column"></div>
  <div class="column is-4"></div>
</div>

响应式列宽

columns 类也支持响应式列宽，可以通过在列上添加相应的 is-{breakpoint}-{width} 类来实现。

例如，以下代码设置在移动设备上列宽为 100%，在平板电脑上列宽为 50%，在桌面设备上列宽为 33.3%：

<div class="columns">
  <div class="column is-12-mobile is-6-tablet is-4-desktop"></div>
  <div class="column is-12-mobile is-6-tablet is-4-desktop"></div>
  <div class="column is-12-mobile is-12-tablet is-4-desktop"></div>
</div>

列偏移

使用 is-offset-{width} 类可以实现对列的偏移。例如：

<div class="columns">
  <div class="column is-6 is-offset-6"></div>
</div>

对齐方式

使用 is-{alignment} 类可以实现不同的对齐方式。可选的对齐方式有：is-centered、is-right、is-multiline。

<div class="columns is-centered">
  <div class="column"></div>
  <div class="column"></div>
  <div class="column"></div>
</div>

组合 Columns

使用 Bulma columns 类，您可以创建多个列容器，每个容器包含一行列。以下列容器大小相等，列大小不同的代码示例。

<div class="columns">
  <div class="column is-two-thirds">Two thirds</div>
  <div class="column">Auto</div>
  <div class="column">Auto</div>
</div>
<div class="columns">
  <div class="column">Auto</div>
  <div class="column">Auto</div>
  <div class="column is-one-third">One third</div>
</div>

嵌套 Columns

使用 Bulma columns 类，您也可以生成嵌套布局。以下代码示例中，第一行包含两个列，第二个包含三个列，其中第二个列又嵌套了两个列。

<div class="columns">
  <div class="column"></div>
  <div class="column"></div>
</div>
<div class="columns">
  <div class="column"></div>
  <div class="column">
    <div class="columns">
      <div class="column"></div>
      <div class="column"></div>
    </div>
  </div>
  <div class="column"></div>
</div>

以上为 Bulma Columns 类的完整参考，您可以参考本文档来快速掌握 Bulma Columns 类的基本用法及其实现方式。