Bootstrap 4 打开modal-lg模态框时背景向左偏移问题求修复（附代码）

我在使用 Bootstrap 4 开发时遇到如下问题：打开 modal-lg 规格的模态框时，页面背景会向左偏移，尝试多种解决方案均未生效，相关截图和代码如下：

问题截图 #

相关代码 #

<!-- The Modal -->
<div class="modal fade mt-5 " id="myModal2@(count)">
  <div class="modal-dialog  modal-lg " style=" padding-left: 0 !important;">
    <div class="modal-content">
      <!-- Modal Header -->
      <div class="modal-header">
        <h6 class="modal-title Bold">ویرایش قرارداد</h6>
      </div>
      <!-- Modal body -->
      <div class="modal-body">
        <form asp-controller="AmorMalie" asp-action="EditSubmitGhrardad" method="post">
          <table class="table table-bordered text-sm ">
            <thead class="text-center">
              <tr style="background-color:#416992; color: white">
                <th>نام پروژه</th>
                <th>نوع خدمات</th>
                <th>مبلغ قرارداد (ریال)</th>
                <th style="width:80px">ت ج ماه</th>
                <th style="width:130px">ارزش افزوده</th>
              </tr>
            </thead>
            <tr>
              <td>
                <input type="hidden" class="hf_selected_val" value="@item.projectID" />
                <select class="form-control " name="projectID" required autocomplete="off">
                  <option value="" default="" selected="">انتخاب کنید</option>
                  @foreach (var items in ViewBag.pros) {
                  <option value="@items.projectID">@items.projectName</option>
                  }
                </select>
              </td>
              <input class="d-none" name="id" value="@item.id" />
              <td>
                <input type="hidden" class="hf_selected_val" value="@item.NoeaKhadmat" />
                <select class="form-control" name="NoeaKhadmat" required autocomplete="off">
                  <option value="" default="" selected="">انتخاب کنید</option>
                  <option value="1">حسابرسی</option>
                  <option value="2">مالیاتی</option>
                  <option value="3">منابع انسانی</option>
                </select>
              </td>
              <td><input class="form-control num" name="MablghGhrardad" onkeyup="javascript:this.value=itpro(this.value);" value="@item.MablghGhrardad" autocomplete="off" /></td>
              <td><input class="form-control num" name="TadadJelse" autocomplete="off" value="@item.TadadJalaseDrMoaheGhrardad" /></td>
              <td class="text-center">
                <input type="checkbox" name="MashmolArzeshAfzoode" @(item.MashmolArzeshAfzoode ? "checked" : "") style="width: 1.25rem; height: 1.25rem; top: .8rem; " class="flat-red" value="True">
              </td>
            </tr>
            <thead class="text-center mr-3">
              <tr style="background-color:#416992; color: white">
                <th>تاریخ شروع</th>
                <th>تاریخ پایان</th>
                <th style="background-color:darkgreen">تعین کارشناس</th>
                <th colspan="2" class="text-center">عملیات</th>
              </tr>
            </thead>
            <tr>
              <td>
                <div class="input-group" style="padding-left:9px; padding-right:9px;">
                  <div class="input-group-addon" style="border:1px solid gray; padding:6px">
                    <span>  <i class="right fa fa-calendar"></i></span>
                  </div>
                  <input name="bgainDate2" id="bgainDate2@(count)" type="text" autocomplete="off" value=" @ConvertDateTime.ConvertMiladiToShamsi(item.ShoroeeProjectDate, " yyyy/MM/dd ")" class="form-control" />
                </div>
              </td>
              <td>
                <div class="input-group" style="padding-left:9px; padding-right:9px;">
                  <div class="input-group-addon" style="border:1px solid gray; padding:6px">
                    <span>  <i class="right fa fa-calendar"></i></span>
                  </div>
                  <input name="EndDate2" id="EndDate2@(count)" type="text" autocomplete="off" value=" @ConvertDateTime.ConvertMiladiToShamsi(item.PayanProjectDate, " yyyy/MM/dd ")" class="form-control" />
                </div>
              </td>
              <td>
                <input type="hidden" class="hf_selected_val" value="@item.UserID" />
                <select class="form-control" name="TaeenKarShnas" autocomplete="off">
                  <option value="" default="" selected="">انتخاب کنید</option>
                  @foreach (var items in ViewBag.userss) {
                  <option value="@items.Id">@items.FirstName @items.Family</option>
                  }
                </select>
              </td>
              <td colspan="2" class="text-center">
                <button type="submit" class="btn btn-success" style="color:white">ویرایش قرارداد</button>
              </td>
            </tr>
          </table>
        </form>
      </div>
      <!-- Modal footer -->
      <div class="modal-footer">
        <button type="button" class="btn btn-danger" data-dismiss="modal">بستن</button>
      </div>
    </div>
  </div>
</div>
@{count++;}

出现该问题的核心原因有两点：一是手动给modal-dialog添加了强制左内边距为0的内联样式，打乱了Bootstrap默认的对齐逻辑；二是当前页面为RTL（从右到左）布局，Bootstrap4默认的模态框打开时的滚动条补偿逻辑是针对LTR布局设计的，会给body添加右侧内边距抵消滚动条消失的宽度，RTL布局下该逻辑不适配就会导致页面左移。
按以下步骤修改即可：

1. 移除modal-dialog标签上的style=" padding-left: 0 !important;"内联样式
2. 项目中添加如下自定义CSS，适配RTL布局下的模态框行为：

body.modal-open {
  overflow-y: scroll !important;
  padding-right: 0 !important;
  /* 常规浏览器滚动条宽度为17px，可根据实际情况调整 */
  padding-left: 17px !important;
}
.modal {
  padding-right: 0 !important;
  padding-left: 0 !important;
}

如果不需要保留页面滚动条，可以使用以下更简单的方案：

body.modal-open {
  overflow: inherit !important;
  padding: 0 !important;
}

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