如何在Bootstrap模式中启用滚动内容？

Question

我正在尝试将大量文本放入使用Twitter Bootstrap创建的模式框中,但我遇到了问题:内容拒绝滚动.我尝试添加overflow:scroll,overflow-y:scroll但无济于事; 只是使它显示滚动条而不实际启用滚动.

这背后的原因是什么,我该怎么办？

Answer 1

在Bootstrap.css中,将positionModal 的背景属性()从fixed更改为absolute

Answer 2

在Bootstrap 3中,您必须更改css类.modal

之前(bootstrap默认):

.modal {

    overflow-y: auto;
}

之后(编辑之后):

.modal {

    overflow-y: scroll;
}

Answer 3

这个答案实际上有两个部分,UX警告和实际解决方案.

UX警告

如果你的模态包含太多以至于需要滚动,请问自己是否应该使用模态.默认情况下,引导模式的大小是对视觉信息应该适合的数量的一个很好的约束.根据您的制作,您可能希望选择新页面或向导.

实际解决方案

在这里:http://jsfiddle.net/ajkochanowicz/YDjsE/2/

此解决方案还允许您更改高度,.modal并.modal-body在必要时使用垂直滚动条占用剩余空间.

UPDATE

请注意,在Bootstrap 3中,模式已经过重构,以便更好地处理溢出内容.当它在视口下流动时,您将能够上下滚动模态本身.

Answer 4

modal-body为整个模态设置高度，而不是为整个模态设置高度，以在模态叠加上获得完美的滚动。我得到它像这样工作：

.MyModal {
    height: 450px;
    overflow-y: auto;
}

您可以在此处根据需要设置高度。