如何将Bootstrap卡片转换为Bulma卡片？附尝试代码求助

下面是完全匹配你Bootstrap代码效果的Bulma版本，完美实现每行3张卡片、居中布局、卡片样式及间距：

<div class="container">
  <div class="columns is-centered is-multiline">
    {% for my_album in albums %}
      <div class="column is-4-desktop is-6-tablet my-2">
        <div class="card" style="width: 18rem;">
          <div class="card-content">
            <p>{{ my_album.name }}</p>
            <a class="button is-success" href="{% url 'Primary-Albums' my_album.pk %}">View Album</a>
          </div>
        </div>
      </div>
    {% endfor %}
  </div>
</div>

核心修正点： #

• 给columns添加is-centered实现内容居中，is-multiline确保换行后卡片自动对齐，对应原Bootstrap的row justify-content-center。
• 列使用is-4-desktop is-6-tablet：桌面端每行3列（和col-md-4逻辑一致，Bulma的12格布局里4份就是1/3宽度），平板端每行2列，移动端自动堆叠，保证响应式效果。
• 保留my-2控制卡片上下间距，和原代码的margin逻辑一致。
• 补上Bulma标准的card和card-content结构，你之前的代码直接把内容放在column里，缺少卡片容器。
• 按钮用is-success对应原Bootstrap的btn btn-success，之前的is-primary是主色按钮，不是成功状态样式。
• 保留了原卡片的固定宽度style="width: 18rem;"，确保视觉效果和原版本一致。

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