为具有 <pre> 标签内容的引导模式主体添加水平滚动条答案

【问题标题】：Adding horizontal scroll bar for bootstrap modal body having <pre> tag content为具有 <pre> 标签内容的引导模式主体添加水平滚动条
【发布时间】：2014-07-22 19:37:25
【问题描述】：

这是解决问题的问题。 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

【问题讨论】：

标签： css twitter-bootstrap-3

【解决方案1】：

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

 得到了我需要的东西
小提琴在这里。 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;
}

【讨论】：