Bootstrap模态框弹出后body的padding-right异常变化如何解决？

点击以下代码实现的id为exampleModal2的模态框后，页面body元素的padding-right属性发生异常变化：

弹窗前的body padding状态 #

模态框代码 #

<div class="modal fade" id="exampleModal2" tabindex="-1" aria-labelledby="exampleModal2Label" aria-hidden="true" style="padding:0;">
    <div class="modal-dialog modal-lg">
                <div class="modal-content" >
            <div class="modal-header">
                <label class="modal-title" id="exampleModal2Label" style="font-weight: 700">Cancel An Order</label>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body" >
                <panel ID="Panel1" >
                    <label class="form-label">Are you sure you want to cancel this order?</label>
                    <div>
                        <button type="button" class="btn btn-outline-danger btn-lg" data-bs-dismiss="modal" style="margin-top: 10px;font-size:x-small;border: none;color: black;">Close</button>
                        <button ID="btn_confirmCancel" class="btn btn-outline-primary btn-lg" data-bs-dismiss="modal" style="margin-top: 10px;font-size:x-small;margin-right: 30px;border: none;color: #14a2ad;" @onclick="cancelOrder">Confirm</button>
                    </div>
                </panel>
            </div>
        </div>
    </div>
</div>

弹窗后的body padding状态 #

解决方法 #

方法1：禁用Bootstrap的滚动条偏移处理

Bootstrap默认会在模态框弹出时给body添加padding-right，用来抵消原生滚动条消失导致的页面偏移。可以通过属性直接禁用这个行为：
修改模态框的HTML标签，添加data-bs-scroll="false"：

<div class="modal fade" id="exampleModal2" tabindex="-1" aria-labelledby="exampleModal2Label" aria-hidden="true" style="padding:0;" data-bs-scroll="false">

如果是通过JS初始化模态框，也可以传递配置项：

const exampleModal2 = new bootstrap.Modal(document.getElementById('exampleModal2'), {
  scrollbarPadding: false
});

方法2：用CSS强制覆盖

添加自定义CSS规则，直接阻止body的padding-right变化：

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

注意：如果页面原本存在原生滚动条，这种方法可能会导致模态框弹出时页面出现轻微偏移，需根据实际场景调整。

方法3：检查自定义滚动条样式

如果页面使用了自定义滚动条（比如隐藏了原生滚动条），Bootstrap的滚动条检测逻辑可能出错，导致错误添加padding-right。此时需要调整自定义滚动条的实现，确保Bootstrap能正确识别滚动条的存在状态。

内容的提问来源于stack exchange，提问作者Metehan Çam