Question

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

要查看问题，请单击按钮，将显示模式。如果向下滚动，您将看到附加到＆lt; pre＆gt;的水平滚动条。标签。我希望水平滚动条像垂直滚动条一样连接到模态体，而不是＆lt; pre＆gt;标签。这就是我到目前为止所拥有的

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

对于上面的max-height条目，请参阅问题Fixed header position in bootstrap 3 modal

Answer 1

我通过移除具有样式＆＃34; 模态体＆＃34;的div标签得到了我需要的东西。并将模态体附加到＆lt; pre＆gt; 小提琴在这里。 http://jsfiddle.net/sheth/YE9Sx/8/

<pre class="report-pre modal-body report-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;
}

为<pre> tag content</pre>的引导模态体添加水平滚动条

1 个答案: