如何调整Bulma CSS卡片尺寸？适配Bootstrap 5 col-md-3效果

核心思路：匹配Bootstrap栅格的Bulma网格配置 #

Bootstrap的col-md-3是在≥768px屏幕下占1/4宽度（3/12），在Bulma里通过响应式列类就能实现对应效果：

• 用columns作为栅格容器，搭配is-multiline确保列自动换行不溢出
• 每个卡片的外层容器使用column is-one-quarter-tablet：在平板及以上屏幕（对应Bootstrap的md断点）占1/4宽度，移动端默认全屏显示
• 若需要移动端也显示多列，比如每行2张，再加is-half-mobile；每行3张则加is-one-third-mobile

结合循环渲染的代码示例（以Vue为例） #

<!-- 栅格容器：is-multiline 处理自动换行 -->
<div class="columns is-multiline">
  <!-- 循环渲染卡片列：响应式类控制不同屏幕下的宽度 -->
  <div v-for="product in products" :key="product.id" class="column is-one-quarter-tablet is-half-mobile">
    <div class="card">
      <div class="card-image">
        <figure class="image is-4by3">
          <img :src="product.image" alt="Product image">
        </figure>
      </div>
      <div class="card-content">
        <div class="content">
          <p class="title is-6">{{ product.name }}</p>
          <p class="subtitle is-7 has-text-grey">{{ product.price }}</p>
        </div>
      </div>
    </div>
  </div>
</div>

优化卡片偏大的问题 #

如果觉得卡片视觉上过大，可做以下调整：

• 用Bulma内置间距类缩小内边距：给card加p-3（p-1到p-6可选，数值越小内边距越小）
• 调整卡片内文字大小：给标题加is-size-6-mobile，副标题加is-size-7-mobile，适配移动端显示
• 统一卡片高度：给card加is-flex is-flex-direction-column，让内容自动填充，避免布局错乱

移动端响应细节优化 #

• 避免卡片挤压：移动端显示多列时，给columns加is-mobile类优化间距
• 限制卡片最大宽度：给card加is-max-width-small，防止大屏上卡片过度拉伸

内容的提问来源于stack exchange，提问作者Adamu Abdulkarim Dee