Bulma 框架如何实现 modal 模态框靠右对齐？

云上老周

2026-9-28

实现方案

Bulma 默认的模态框通过 margin: 0 auto 实现水平居中，我们只需要新增自定义类覆盖对齐规则即可，无需修改 Bulma 原有核心样式：

新增自定义CSS

/* 右对齐模态框核心样式 */
.modal.is-right .modal-content {
  /* 取消左右居中，左margin设为auto实现右对齐 */
  margin: 0 0 0 auto;
  /* 自定义右侧模态框宽度，可根据需求调整 */
  max-width: 420px;
  /* 若需要模态框占满整个视口高度，可添加以下两行，不需要则删除 */
  height: 100vh;
  display: flex;
  flex-direction: column;
}

/* 可选：添加右侧滑入动画 */
.modal.is-right .modal-content {
  transform: translateX(100%);
  transition: transform 0.3s ease-out;
}
.modal.is-right.is-active .modal-content {
  transform: translateX(0);
}

HTML 调用方式
只需要给原有的 .modal 元素新增 is-right 类即可，原有 Bulma 模态框的用法完全不需要修改：

<div class="modal is-right">
  <div class="modal-background"></div>
  <div class="modal-content">
    <!-- 模态框内容，支持原有的 card 等组件 -->
    <div class="card">
      <div class="card-header">
        <p class="card-header-title">右侧模态框</p>
      </div>
      <div class="card-content">
        <p>模态框内容区域</p>
      </div>
    </div>
  </div>
  <button class="modal-close is-large" aria-label="关闭"></button>
</div>