如何在移动端正确居中设置了最小宽度的Bootstrap模态框？

问题概述 #

当给页面body设置min-width: 980px及以上值时，移动端设备上Bootstrap 3、4、5版本的模态框都会出现异常：

• 模态框无法正确居中，超出屏幕可视范围
• 遮罩层未覆盖全屏，页面右侧留有空白
• 该问题在RTL（从右到左）布局下表现更明显

问题根源 #

Bootstrap模态框的遮罩层和定位逻辑默认基于浏览器视口计算，但当body被强制设置了大于移动端视口的最小宽度时，页面会出现横向滚动，模态框的定位代码未适配这种强制宽的场景，导致遮罩层仅覆盖视口宽度，模态框随页面整体偏移。

分版本解决方案 #

Bootstrap 3 修复代码 #

添加以下自定义CSS，强制遮罩层全屏覆盖，并修正模态框的居中逻辑：

/* 修复遮罩层全屏覆盖 */
.modal-backdrop {
  width: 100vw !important;
  left: 0 !important;
}

/* 修复模态框居中，不受body min-width影响 */
.modal {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  margin-left: 0 !important;
}

/* RTL布局适配 */
html[dir="rtl"] .modal {
  right: 50%;
  left: auto;
  transform: translateX(50%);
}

Bootstrap 4/5 修复代码 #

Bootstrap 4+使用了Flex布局优化模态框，修复代码调整如下：

/* 修复遮罩层全屏覆盖 */
.modal-backdrop {
  width: 100vw !important;
  position: fixed !important;
  left: 0 !important;
}

/* 修复模态框居中，适配移动端边距 */
.modal-dialog {
  margin: 1.75rem auto !important;
  max-width: calc(100vw - 30px);
}

/* RTL布局适配 */
html[dir="rtl"] .modal-dialog {
  margin-right: auto !important;
  margin-left: auto !important;
}

完整示例代码（Bootstrap 3 + RTL布局） #

<!DOCTYPE html>
<html dir="rtl">
<head>
  <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"
    integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
    crossorigin="anonymous"></script>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"
    integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"
    integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
    crossorigin="anonymous"></script>
  <style>
    body {
      min-width: 1035px;
    }
    /* 模态框修复样式 */
    .modal-backdrop {
      width: 100vw !important;
      left: 0 !important;
    }
    .modal {
      position: fixed;
      left: 50%;
      transform: translateX(-50%);
      margin-left: 0 !important;
    }
    html[dir="rtl"] .modal {
      right: 50%;
      left: auto;
      transform: translateX(50%);
    }
  </style>
</head>
<body>
  <button class="btn btn-lg btn-primary center-block" data-remote="false" data-toggle="modal" data-target="#myModal">显示模态框</button>
  
  <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
          <h4 class="modal-title" id="myModalLabel">模态框标题</h4>
        </div>
        <div class="modal-body">
          测试内容
        </div>
      </div>
    </div>
  </div>
</body>
</html>

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