如何在CSS中使用Bulma制作卡片列表_Bulma columns类与card结合

新闻中心 NEWS CENTER

您当前位置：首页 > 新闻中心 > 网络学院

如何在CSS中使用Bulma制作卡片列表_Bulma columns类与card结合

2025-11-26

浏览次数：次

返回列表

使用Bulma的columns与card结合可快速构建响应式卡片列表，通过is-one-third-desktop、is-half-tablet等类控制多端布局，配合is-multiline实现换行，card内部结构支持图文与操作按钮，自动适配不同屏幕尺寸，无需额外CSS。

如何在css中使用bulma制作卡片列表_bulma columns类与card结合

在使用 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">
          @@##@@
        </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"> 内，<strong>columns</strong> 容器会自动处理间距和换行。<h3>控制列数与响应式行为</h3> <p>默认情况下，<code>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 允许列在容器宽度不足时换行，确保布局整齐。

语鲸

AI智能阅读辅助工具

314

查看详情

去除间距与美化排版

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 结合，能快速搭建出美观、响应式的卡片列表，无需额外编写复杂样式。