如何在Bootstrap 5 Modal中使用全宽Bootstrap Grid System并消除边距

问题原因 #

你遇到的边距来自Bootstrap 5 为.modal-body默认设置的1rem左右内边距，如果你在模态框内同时使用了带默认内边距的.container/.container-fluid类，双重内边距会让间隙更明显。

解决方案 #

方案1：使用Bootstrap内置工具类（最推荐，无需自定义CSS） #

直接给.modal-body元素添加内置的边距清零类即可：

• 要清除模态框body所有方向的内边距，加p-0类
• 仅需清除左右内边距，加px-0类
• 如果同时需要清除栅格列之间的默认沟槽，给.row元素加g-0类

代码示例：

<div class="modal fade" id="exampleModal" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">模态框标题</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <!-- 给modal-body加px-0清除左右边距 -->
      <div class="modal-body px-0">
        <!-- 加g-0清除列之间的间距，不需要可以去掉 -->
        <div class="row g-0">
          <div class="col-4">第一列内容</div>
          <div class="col-8">第二列内容</div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
        <button type="button" class="btn btn-primary">保存</button>
      </div>
    </div>
  </div>
</div>

方案2：自定义CSS覆盖 #

如果需要全局修改所有模态框的边距，或者需要更灵活的自定义，可以添加自定义样式：

/* 全局所有模态框的body清除左右内边距 */
.modal-body {
  padding-left: 0;
  padding-right: 0;
}

/* 如果只想针对特定模态框生效，给模态框加自定义类即可，不会影响其他模态框 */
.custom-modal .modal-body {
  padding: 0;
}

对应HTML结构：

<div class="modal fade custom-modal" id="exampleModal" tabindex="-1">
  <!-- 其余结构不变 -->
</div>

方案3：部分内容保留边距的处理 #

如果你只需要栅格部分对齐模态框边框，其他文字内容保留默认边距，可以给栅格外层套一个带负左右边距的容器抵消modal-body的默认内边距：

<div class="modal-body">
  <p>这部分内容保留默认边距</p>
  <!-- mx-n3对应左右负margin 1rem，正好抵消modal-body的默认1rem左右内边距 -->
  <div class="mx-n3">
    <div class="row">
      <div class="col">栅格内容会左右对齐模态框边框</div>
    </div>
  </div>
</div>

问题示意图 #

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