如何将div定位在Bootstrap模态框内部表格的右下角位置

问题根因 #

你当前使用offset方案不稳定的核心原因有两点：

1. Bootstrap栅格的offset仅控制水平偏移，无法控制垂直方向对齐，表格高度随数据变化时，右侧div会始终对齐顶部，无法固定在表格底部
2. 多断点下的offset值适配精度低，不同屏幕尺寸下很容易出现水平错位

推荐解决方案 #

方案1：Flex底部对齐方案（适配Bootstrap 4/5，无额外冗余代码） #

利用Bootstrap内置的flex工具类，无需写自定义CSS就能实现底部对齐，适配所有响应式断点：

1. 给包裹表格和右侧div的row元素添加d-flex align-items-end类，开启flex布局并强制子元素底部对齐
2. 删除右侧div的所有offset类，直接按栅格比例分配宽度即可，12列栅格下10+2（md尺寸）、9+3（sm尺寸）、6+6（xs尺寸）刚好占满整行，不需要额外偏移

修改后的核心结构示例：

<div class="row d-flex align-items-end">
  <!-- 表格区域 -->
  <div class="col-md-10 col-sm-9 col-xs-6">
    <!-- 原有表格代码不变 -->
    <div class="panel panel-primary panel-primary-trim">
      <!-- 面板、表格代码保持原样 -->
    </div>
  </div>
  <!-- 右侧定位div -->
  <div class="col-md-2 col-sm-3 col-xs-6">
    <!-- 原有form-group代码不变 -->
  </div>
</div>

如果使用Bootstrap3，没有内置flex工具类，添加以下自定义CSS即可：

.align-bottom-row {
  display: flex;
  align-items: flex-end;
}

给row元素添加align-bottom-row类即可生效。

方案2：绝对定位方案（固定绑定表格右下角，不受栅格影响） #

如果需要完全固定在表格右下角，不受栅格列宽变化影响，可以使用相对+绝对定位实现：

1. 给包裹表格的panel-body元素添加position: relative属性
2. 将右侧div移入panel-body容器内，和table-responsive同级
3. 给右侧div添加以下自定义样式：

.table-right-fixed {
  position: absolute;
  right: 15px;
  bottom: 15px;
  width: 18%;
}
/* 给panel-body加右内边距，避免表格内容被遮挡 */
.panel-body-trim {
  padding-right: 20%;
}

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