如何使用Bulma CSS使按钮尺寸统一？

下面几种方法可以让按钮保持相同尺寸，无需使用is-fullwidth：

• 自定义固定/最小宽度
  给按钮添加自定义CSS类，设置最小宽度或固定宽度，避免按钮随内容长度变化：

  .btn-uniform {
    min-width: 140px; /* 最小宽度，内容短的时候维持宽度，长内容自适应 */
    /* 也可以用 width: 140px; 强制固定宽度，过长内容可配合截断 */
  }
  

  按钮使用时带上这个类：

  <button class="button btn-uniform">确认</button>
  <button class="button btn-uniform">取消操作</button>
  

  若担心长内容溢出，可搭配Bulma自带的text-truncate类截断文本：

  <button class="button btn-uniform text-truncate">非常非常长的按钮文本内容</button>
  

• 利用网格容器约束宽度
  将按钮放在Bulma网格的等宽列中，通过容器宽度统一按钮尺寸：

  <div class="columns is-gapless">
    <div class="column is-3">
      <button class="button">保存</button>
    </div>
    <div class="column is-3">
      <button class="button">删除当前条目</button>
    </div>
  </div>
  

  这里is-3指定了列的宽度占比，也可以用is-narrow配合自定义列宽，让容器适配按钮但保持统一宽度。

• Sass变量全局配置（进阶）
  如果项目用Sass编译Bulma，直接修改内置变量实现全局按钮统一尺寸：

  $button-min-width: 140px; // 设置所有按钮的最小宽度
  @import "bulma";
  

  这样所有按钮会默认应用这个最小宽度，无需额外添加类。

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