5

当我学习引导程序并在官方页面上尝试示例时，我发现模态组件存在缺陷（可能）。

单击“Launch demo modal”，您会注意到右上角有一个明显的边距，当模态对话框消失/出现时，导航栏会拉伸/收缩。

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

4

9 回答 9

7

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

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

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

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

.modal
{
    overflow-y: auto;
}

也是。

于 2013-09-07T05:25:17.587 回答
5

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

body.modal-open, .modal-open .navbar-fixed-top, .modal-open .navbar-fixed-bottom {
    padding-right: 0px !important;
    overflow-y: auto;
}
于 2015-01-08T16:38:27.660 回答
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

于 2014-03-08T09:58:23.140 回答
2

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

这对我来说适用于 v3.1.1。

html, .modal, .modal.in, .modal-backdrop.in {
    overflow-y: auto;
}
于 2014-04-18T10:44:20.473 回答
1

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

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

于 2014-04-04T11:36:03.900 回答
1

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

html { overflow-y:auto; }

在你的样式表中阻止它向左移动

于 2014-01-08T13:59:28.117 回答
0

margin-right在我的情况下不起作用，我发现padding-right可以解决问题。

body.modal-open {
    padding-right: 0px;
}
于 2014-08-25T22:51:28.147 回答
0 
body, .navbar-fixed-top, .navbar-fixed-bottom {
  margin-right: 0 !important;
}

这对我有用

于 2014-05-21T10:21:52.463 回答
0

I tried Agni Pradharma's fix, but had to slightly tweak it to make it work.

I got it working using this:

 $(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);
    };
于 2014-09-13T07:00:18.520 回答