如何在Bulma中实现同列等高等宽卡片且按钮固定在底部

需要在页面中放置3-6个相邻卡片，要求：

• 所有卡片宽度、高度完全一致
• "order"按钮始终位于卡片底部

尝试给.column添加is-flex类解决了高度一致问题，但破坏了列的宽度；不想使用min-height: 10rem;这类固定高度的折中方案。

当前效果：

原始代码 #

<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/1.0.1/css/bulma.min.css" rel="stylesheet" />

<div class="columns ml-1 mt-3">
  <div class="column is-3">
    <div class="card has-background-warning-light">
      <div class="card-header">
        <p class="has-text-right card-header-title is-centered is-uppercase">
          regular price
        </p>
      </div>
      <div class="card-image">
        <div class="has-background-warning">
          <div class="has-text-centered">
            <span class="is-size-1 has-text-weight-bold has-text-white">
                                    450 €
                                </span>

          </div>
        </div>
      </div>
      <div class="card-content">
        <div class="content">
          <p class="title is-3" style="display: flex;">
            standard price available for everyone
          </p>

          <button class="button is-dark is-fullwidth is-uppercase has-text-weight-bold">
                                order
                            </button>
        </div>
      </div>
    </div>
  </div>
  <div class="column is-3">
    <div class="card has-background-danger-light">
      <div class="card-header">
        <p class="has-text-right card-header-title is-centered is-uppercase">
          for early birds
        </p>
      </div>
      <div class="card-image">
        <div class="has-background-danger">
          <div class="has-text-centered">
            <span class="is-size-1 has-text-weight-bold has-text-white">
                                    350 €
                                </span>

          </div>
        </div>
      </div>
      <div class="card-content">
        <div class="content">
          <p class="title is-3" style="display: flex;">
            very long text that showas thet the items becomes mostly taller than the other ones.
          </p>

          <button class="button is-dark is-fullwidth is-uppercase has-text-weight-bold">
                                order
                            </button>
        </div>
      </div>
    </div>
  </div>

  <div class="column is-3">
    <div class="card has-background-info-light">
      <div class="card-header">
        <p class="has-text-right card-header-title is-centered is-uppercase">
          reduced
        </p>
      </div>
      <div class="card-image">
        <div class="has-background-info">
          <div class="has-text-centered">
            <span class="is-size-1 has-text-weight-bold has-text-white">
                                    250 €
                                </span>
          </div>
        </div>
      </div>
      <div class="card-content">

        <div class="content">
          <p class="title is-3" style="display: flex;">
            only until ...
          </p>

          <button class="button is-dark is-fullwidth is-uppercase has-text-weight-bold">
                                order
                            </button>
        </div>
      </div>
    </div>
  </div>

  <div class="column is-3">
    <div class="card">
      <div class="card-header has-background-primary-light">
        <p class="has-text-right card-header-title is-centered is-uppercase">
          green price
        </p>
      </div>
      <div class="card-image">
        <div class="has-background-primary">
          <div class="has-text-centered">
            <span class="is-size-1 has-text-weight-bold has-text-white">
                                    180 €
                                </span>

          </div>
        </div>
      </div>
      <div class="card-content">

        <div class="content">
          <p class="title is-3">
            the reason
          </p>

          <button class="button is-dark is-fullwidth is-uppercase has-text-weight-bold mt-auto">
                                order
                            </button>
        </div>
      </div>
    </div>
  </div>
</div>

不需要破坏列宽度，通过调整flex布局层级即可实现需求，具体修改点：

1. 给每个.column添加is-flex类，让列成为flex容器，确保所有列高度一致，同时保留is-3的宽度设置
2. 给每个.card添加is-flex flex-column类，让卡片内部采用垂直flex布局，确保卡片占满列的高度
3. 给每个.card-content添加flex-grow-1类，让内容区域自动填充卡片的剩余空间，保证所有卡片高度一致
4. 给每个.content添加is-flex flex-column类，然后给order按钮添加mt-auto类，将按钮推到内容区域的底部

修改后的代码 #

<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/1.0.1/css/bulma.min.css" rel="stylesheet" />

<div class="columns ml-1 mt-3">
  <div class="column is-3 is-flex">
    <div class="card has-background-warning-light is-flex flex-column">
      <div class="card-header">
        <p class="has-text-right card-header-title is-centered is-uppercase">
          regular price
        </p>
      </div>
      <div class="card-image">
        <div class="has-background-warning">
          <div class="has-text-centered">
            <span class="is-size-1 has-text-weight-bold has-text-white">
                                    450 €
                                </span>

          </div>
        </div>
      </div>
      <div class="card-content flex-grow-1">
        <div class="content is-flex flex-column">
          <p class="title is-3">
            standard price available for everyone
          </p>

          <button class="button is-dark is-fullwidth is-uppercase has-text-weight-bold mt-auto">
                                order
                            </button>
        </div>
      </div>
    </div>
  </div>
  <div class="column is-3 is-flex">
    <div class="card has-background-danger-light is-flex flex-column">
      <div class="card-header">
        <p class="has-text-right card-header-title is-centered is-uppercase">
          for early birds
        </p>
      </div>
      <div class="card-image">
        <div class="has-background-danger">
          <div class="has-text-centered">
            <span class="is-size-1 has-text-weight-bold has-text-white">
                                    350 €
                                </span>

          </div>
        </div>
      </div>
      <div class="card-content flex-grow-1">
        <div class="content is-flex flex-column">
          <p class="title is-3">
            very long text that showas thet the items becomes mostly taller than the other ones.
          </p>

          <button class="button is-dark is-fullwidth is-uppercase has-text-weight-bold mt-auto">
                                order
                            </button>
        </div>
      </div>
    </div>
  </div>

  <div class="column is-3 is-flex">
    <div class="card has-background-info-light is-flex flex-column">
      <div class="card-header">
        <p class="has-text-right card-header-title is-centered is-uppercase">
          reduced
        </p>
      </div>
      <div class="card-image">
        <div class="has-background-info">
          <div class="has-text-centered">
            <span class="is-size-1 has-text-weight-bold has-text-white">
                                    250 €
                                </span>
          </div>
        </div>
      </div>
      <div class="card-content flex-grow-1">
        <div class="content is-flex flex-column">
          <p class="title is-3">
            only until ...
          </p>

          <button class="button is-dark is-fullwidth is-uppercase has-text-weight-bold mt-auto">
                                order
                            </button>
        </div>
      </div>
    </div>
  </div>

  <div class="column is-3 is-flex">
    <div class="card is-flex flex-column">
      <div class="card-header has-background-primary-light">
        <p class="has-text-right card-header-title is-centered is-uppercase">
          green price
        </p>
      </div>
      <div class="card-image">
        <div class="has-background-primary">
          <div class="has-text-centered">
            <span class="is-size-1 has-text-weight-bold has-text-white">
                                    180 €
                                </span>

          </div>
        </div>
      </div>
      <div class="card-content flex-grow-1">
        <div class="content is-flex flex-column">
          <p class="title is-3">
            the reason
          </p>

          <button class="button is-dark is-fullwidth is-uppercase has-text-weight-bold mt-auto">
                                order
                            </button>
        </div>
      </div>
    </div>
  </div>
</div>

原理说明 #

• column.is-flex：让列作为flex容器，强制所有列高度匹配最高的列，同时is-3类依然生效，保证宽度一致
• card.is-flex.flex-column：让卡片内部垂直排列，且卡片会自动占满列的高度
• card-content.flex-grow-1：让内容区域占据卡片的剩余空间，确保不同长度的内容都能撑满卡片高度
• content.is-flex.flex-column + button.mt-auto：将内容区域设为垂直flex布局，mt-auto会让按钮自动推到内容区域的底部，不管上方内容长度如何

内容的提问来源于stack exchange，提问作者xtlc