引导模式存在缺陷

要手动修复此问题，只需添加

body.modal-open, 
.modal-open .navbar-fixed-top, 
.modal-open .navbar-fixed-bottom 
{
    margin-right: 0px;
}

到引导样式表之后应用的样式表。

如果你也想隐藏滚动条，你可以添加

.modal
{
    overflow-y: auto;
}

同样。

这是我找到的最好的解决方案：

body.modal-open, .modal-open .navbar-fixed-top, .modal-open .navbar-fixed-bottom {
    padding-right: 0px !important;
    overflow-y: auto;
}

这是一个向引导程序报告的问题：https://github.com/twbs/bootstrap/issues/9855

这是我的临时快速修复，它使用固定的顶部导航栏，只使用javascript。将此脚本与页面一起加载。

$(document.body)
.on('show.bs.modal', function () {
    if (this.clientHeight <= window.innerHeight) {
        return;
    }
    // Get scrollbar width
    var scrollbarWidth = getScrollBarWidth()
    if (scrollbarWidth) {
        $(document.body).css('padding-right', scrollbarWidth);
        $('.navbar-fixed-top').css('padding-right', scrollbarWidth);    
    }
})
.on('hidden.bs.modal', function () {
    $(document.body).css('padding-right', 0);
    $('.navbar-fixed-top').css('padding-right', 0);
});
function getScrollBarWidth () {
    var inner = document.createElement('p');
    inner.style.width = "100%";
    inner.style.height = "200px";
    var outer = document.createElement('div');
    outer.style.position = "absolute";
    outer.style.top = "0px";
    outer.style.left = "0px";
    outer.style.visibility = "hidden";
    outer.style.width = "200px";
    outer.style.height = "150px";
    outer.style.overflow = "hidden";
    outer.appendChild (inner);
    document.body.appendChild (outer);
    var w1 = inner.offsetWidth;
    outer.style.overflow = 'scroll';
    var w2 = inner.offsetWidth;
    if (w1 == w2) w2 = outer.clientWidth;
    document.body.removeChild (outer);
    return (w1 - w2);
};

以下是工作示例：http://jsbin.com/oHiPIJi/64

当原始页面已经有滚动条并且还没有滚动条时，一定要测试两者。

这在v3.1.1中对我有效。

html, .modal, .modal.in, .modal-backdrop.in {
    overflow-y: auto;
}

除此之外，还要确保您有以下

html { overflow-y:auto; }

在样式表中，以阻止它向左移动

我也遇到了这个问题（bootstrap 3.1.1）。我打开了一个模态，但背景上缺少一个空间（如果模态大于页面高度，则会出现滚动条），页面内容正在调整大小并向左移动。

我的布局使用固定的导航栏。

我添加了几个CSS选择器，似乎可以防止页面调整大小，并确保模式背景填充屏幕

html {
    /* This prevents the page from shifting when a modal is opened e.g. search */
    overflow-y: auto;   
}
.modal,.modal.in,.modal-backdrop.in {
    /* These are to prevent the blank space for the scroll bar being displayed unless the modal is > page height */
    overflow-y: auto;
}

如果页面和模态内容大于屏幕高度，那么你可以有两个滚动条，我仍然觉得有点奇怪，但我可以接受。

margin-right在我的情况下不起作用，我找到了padding-right来解决问题。

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

我尝试了Agni Pradharma的修复方法，但必须稍微调整一下才能正常工作。

我用这个让它工作：

 $(document.body)
    .on('show.bs.modal', function () {
        if (this.clientHeight <= window.innerHeight) {
            return;
        }
        // Get scrollbar width
        var scrollbarWidth = getScrollBarWidth()
        if (scrollbarWidth) {
            $('.navbar-fixed-top').css('margin-right', scrollbarWidth);    
        }
    })
    .on('hide.bs.modal', function () {
        $('.navbar-fixed-top').css('margin-right', 0);
    });
    function getScrollBarWidth () {
        var inner = document.createElement('p');
        inner.style.width = "100%";
        inner.style.height = "200px";
        var outer = document.createElement('div');
        outer.style.position = "absolute";
        outer.style.top = "0px";
        outer.style.left = "0px";
        outer.style.visibility = "hidden";
        outer.style.width = "200px";
        outer.style.height = "150px";
        outer.style.overflow = "hidden";
        outer.appendChild (inner);
        document.body.appendChild (outer);
        var w1 = inner.offsetWidth;
        outer.style.overflow = 'scroll';
        var w2 = inner.offsetWidth;
        if (w1 == w2) w2 = outer.clientWidth;
        document.body.removeChild (outer);
        return (w1 - w2);
    };