Bootstrap模式存在缺陷

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

也确保你已经在你的样式表来阻止它左移

Answer 3

这是一个报告的问题来引导下列

html { 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

Answer 4

我有这个问题，以及（引导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 5

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

这适用于我与v3.1.1。

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

Answer 6

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

这个工作对我来说

Answer 7

margin-right并没有我的情况下工作，我发现padding-right来解决这个问题。

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

Answer 8

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

Answer 9

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

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