使用Bulma的columns与card结合可快速构建响应式卡片列表，通过is-one-third-desktop、is-half-tablet等类控制多端布局，配合is-multiline实现换行，card内部结构支持图文与操作按钮，自动适配不同屏幕尺寸，无需额外CSS。
在使用 Bulma 框架开发响应式页面时，将 card 组件与 columns 布局结合是一种常见且高效的方式，尤其适用于展示卡片列表，比如产品、文章或用户信息。通过 Bulma 的网格系统，可以轻松实现多列自适应布局。
使用 columns 与 card 实现卡片列表
Bulma 的 columns 类提供了一套基于 Flexbox 的响应式网格系统，配合 column 子类可划分布局区域。每个卡片放在一个 column 中，Bulma 会自动等宽分配空间，并在小屏幕上堆叠显示。
基本结构如下：
<div class="columns">
<div class="column">
<div class="card">
<div class="card-image">
<figure class="image is-4by3">
<img src="example.jpg" alt="Placeholder image">
</figure>
</div>
<div class="card-content">
<p class="title">卡片标题</p>
<p class="subtitle">副标题信息</p>
<div class="content">
这是卡片的描述内容。
</div>
</div>
</div>
</div>
<p><!-- 更多 column + card -->
</div></p>每张卡片包裹在 <div class="column"> 内，columns 容器会自动处理间距和换行。
立即学习“前端免费学习笔记（深入）”；
控制列数与响应式行为
默认情况下，columns 会尽可能多地放入等宽列。你也可以通过为 column 添加具体宽度类来控制每行显示数量：
-
is-one-third：每行最多 3 张卡片（适合桌面） -
is-half：每行 2 张（平板适配） -
is-full：移动端堆叠为单列
结合响应式前缀实现更精细控制：
<div class="columns is-multiline">
<div class="column is-one-third-desktop is-half-tablet is-full-mobile">
<div class="card">...</div>
</div>
<div class="column is-one-third-desktop is-half-tablet is-full-mobile">
<div class="card">...</div>
</div>
<!-- 更多卡片 -->
</div>
添加 is-multiline 允许列在容器宽度不足时换行，确保布局整齐。
去除间距与美化排版
Bulma 默认在 column 之间留有间距（约 1rem）。如果需要更紧凑的布局，可添加 is-gapless 类，或使用自定义 CSS 调整间距。
也可通过 card 内部元素如 media、button 等增强交互性：
<footer class="card-footer">
<p class="card-footer-item">
<a href="#">查看详情</a>
</p>
<p class="card-footer-item">
<a href="#">分享</a>
</p>
</footer>
这样可以让每张卡片具备操作功能，提升用户体验。
基本上就这些。用 Bulma 的 columns 和 card 结合，能快速搭建出美观、响应式的卡片列表，无需额外编写复杂样式。
