css - 为具有 <pre> 标记内容的引导模式主体添加水平滚动条

Question

这是解决问题的 fiddle 。 http://jsfiddle.net/sheth/YE9Sx/ 我正在尝试做一个文本查看器。我没有将文本作为文档，而是作为页面和行的 JSON 数组。我决定使用 Bootstrap Modal 并获得页眉和页脚文具，文档在它们之间垂直滚动为一个页面。

要查看问题，请单击按钮，然后会出现模式。如果向下滚动，您将看到附加到

 标记的水平滚动条。我希望水平滚动条像垂直滚动条一样附加到模态主体，而不是 
 标记。
这是我目前所拥有的


 
.report-modal-body {
    max-height: calc(100vh - 148px);
    overflow-y: auto;
    overflow-x:auto;
}
.report-pre {
    width:100%;
    overflow-x:auto;
    word-wrap:normal;
}


对于上面的最大高度条目，请参阅问题 Fixed header position in bootstrap 3 modal 

			            

Answer 1

通过删除样式为“modal-body”的 div 标签并将 modal-body 附加到

，我得到了我需要的东西
 fiddle 在这里。 http://jsfiddle.net/sheth/YE9Sx/8/ 


 
<pre class="report-pre modal-body report-modal-body">


其他选项是设置具有类 modal-body 的 div 标签的样式，以便使用固定宽度的字体并将空白视为前置标签

 http://jsfiddle.net/sheth/YE9Sx/12/ 

 
<div class="modal-body report-modal-body">
.report-modal-body {
    max-height:calc(100vh - 150px);
    overflow-y:auto;
    overflow-x:auto;
    white-space:pre;
    font-family:monospace;
}