如何将Bootstrap模态框按钮放置在Modal Footer区域？

要将「Add Order」和「Cancel」按钮固定在自定义高度的模态框底部，可通过Bootstrap原生组件结合简单CSS实现，步骤如下：

1. 调整模态框结构 #

将按钮放入Bootstrap官方提供的.modal-footer容器中，这是模态框底部操作栏的标准结构：

<div class="modal fade" id="orderModal" tabindex="-1" aria-labelledby="orderModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content" style="height: 600px;"> <!-- 你的自定义模态框高度 -->
      <div class="modal-header">
        <h5 class="modal-title" id="orderModalLabel">Add New Order</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <!-- 你的表单或内容区域 -->
      </div>
      <!-- 底部按钮容器 -->
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
        <button type="button" class="btn btn-primary">Add Order</button>
      </div>
    </div>
  </div>
</div>

2. 添加CSS固定Footer #

因为你自定义了模态框高度，默认的.modal-footer会随内容流动，需要通过CSS让它固定在底部，同时保证主体内容可滚动且不被遮挡：

/* 给模态框内容添加相对定位，作为footer绝对定位的参考容器 */
.modal-content {
  position: relative;
}

/* 让模态主体内容可滚动，并预留footer的高度空间 */
.modal-body {
  overflow-y: auto;
  padding-bottom: 80px; /* 值需大于等于footer的实际高度 */
}

/* 固定footer在模态框底部 */
.modal-footer {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #fff; /* 用背景色覆盖下方内容 */
  border-top: 1px solid #dee2e6; /* 保留Bootstrap默认边框风格 */
}

关键说明 #

• 绝对定位的.modal-footer必须依赖position: relative的.modal-content，否则会脱离模态框范围。
• modal-body的padding-bottom需根据按钮栏的高度调整，避免底部内容被按钮遮挡。
• 保留.modal-footer的默认样式，确保和Bootstrap整体风格统一。

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