Question

Bootstrap 模式存在缺陷

2013-08-31

7292

javascript css twitter-bootstrap

当我学习 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

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