Question

当我学习bootstrap并在官方页面上试用这个例子时，我发现了modal组件的一个缺陷（可能）。

单击“启动演示模式”，您会注意到右上角有一个显着的边距，当模式对话框消失/出现时，导航栏将拉伸/缩小。

这是一个错误还是故意的？我认为这很烦人，如何禁用它？

Answer 1

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

即可

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

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

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

.modal
{
    overflow-y: auto;
}

。

Answer 2

这是我发现的最佳解决方案：

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

Answer 3

这是一个报告的引导问题：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

Answer 4

当原始页面已经有滚动条并且还没有滚动条时，请务必测试两者。

这对我来说对v3.1.1很有用。

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

Answer 5

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

html { overflow-y:auto; }

样式表中的

可以阻止它向左移动

Answer 6

我也有这个问题（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;
}

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

Answer 7

body, .navbar-fixed-top, .navbar-fixed-bottom {
  margin-right: 0 !important;
}

这对我有用

Answer 8

margin-right在我的案例中不起作用，我找到padding-right来解决问题。

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

Answer 9

我尝试了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);
    };

Bootstrap模态有一个缺陷

9 个答案: