问题解决了结合解决方案@卡洛斯卡拉和@乔纳森马斯顿。

    /* Important part */
.modal-dialog{
    overflow-y: initial !important
}
.modal-body{
    max-height: calc(100vh - 200px);
    overflow-y: auto;
}

你必须设置。modal-body的高度并赋予它overflow-y: auto。同时将.modal-dialog溢出值重置为初始值。

参见工作示例:

http://www.bootply.com/T0yF2ZNTUd

.modal{
    display: block !important; /* I added this to see the modal, you don't need this */
}

/* Important part */
.modal-dialog{
    overflow-y: initial !important
}
.modal-body{
    height: 80vh;
    overflow-y: auto;
}

#scroll-wrap {
    max-height: 50vh;
    overflow-y: auto;
}

在模态体上使用max-height和vh作为单位，或者在模态体内部使用包装器div。当用户调整窗口大小时，这将自动调整模态体或包装div(在本例中)的高度。

Vh是长度单位，表示视口高度占视口大小的1%。

vh单元的浏览器兼容性图表。

例如:https://jsfiddle.net/q3xwr53f/

在最新的引导版本中，有一个类使模态体可滚动。

.modal-dialog-scrollable到.modal-dialog。

用于模态体可滚动内容的引导模态链接

<!-- Scrollable modal -->
<div class="modal-dialog modal-dialog-scrollable">
  ...
</div>

如果你只支持IE 9或更高版本，你可以使用这个CSS来平滑地缩放到窗口的大小。你可能需要调整“200px”，这取决于你的页眉或页脚的高度。

.modal-body{
    max-height: calc(100vh - 200px);
    overflow-y: auto;
}

在你的模态体中，你必须设置一个高度，它可以是% vh或calc:

modal-body {
    height: 80vh;
    overflow-x: auto;
}

or

modal-body {
    height: calc(100vh - 5em);
    overflow-x: auto;
}

在我的例子中是这样的: