如何禁用Bootstrap模态框滚动条，实现内部分列自定义div独立滚动

要实现Bootstrap模态框body区域两列独立滚动、禁用模态框整体滚动的主从布局效果，可按以下方式配置： #

核心配置要点 #

• 禁用模态框body默认的全局滚动能力，将滚动权限下发给内部的两个列
• 给两列分别添加overflow-auto类，实现内容超出时独立触发滚动
• 确保模态框内容区域高度固定，头部和页脚保持固定不随内容滚动

完整代码示例 #

CSS代码 #

/* 基础字号配置，可根据需求调整 */
body, html { font-size: 10px }
/* 确保modal-body占满分配的内容高度，不触发全局滚动 */
.modal-body {
  overflow: hidden;
  height: 400px; /* 可根据业务需求自定义高度，也可使用vh适配视口 */
}
/* 让内部行占满modal-body的全部高度 */
.modal-body .row {
  height: 100%;
}

HTML代码 #

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"/>

<div class="modal-dialog">
  <div class="modal-content">
    <div class="modal-header">Header</div>
    <div class="modal-body">
      <div class="row g-0"> <!-- g-0可去掉列默认间距，按需保留 -->
        <div class="col overflow-auto">Col1 主列表区域，内容过长时可独立滚动</div>
        <div class="col overflow-auto">Col2 详情区域，内容过长时可独立滚动</div>
      </div>
    </div>
    <div class="modal-footer">Footer</div>
  </div>
</div>

效果说明 #

配置完成后模态框自身不会出现滚动条，左右两列内容超出高度限制时会各自生成滚动条，滚动操作互不干扰，完全满足主从布局的交互需求。

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