如何让推特Bootstrap的<pre>块水平滚动？
如何让推特Bootstrap的<pre>块水平滚动？
提问于 2012-04-30 01:18:32
根据示例https://getbootstrap.com/docs/4.3/content/code/#code-blocks，bootstrap只支持开箱即用的垂直滚动和文字包装的<pre>块。我如何才能让我拥有水平滚动的、未包装的代码块呢？
回答 3
Stack Overflow用户
发布于 2013-05-07 21:34:50
这对我很有效：
pre {
overflow-x: auto;
}
pre code {
overflow-wrap: normal;
white-space: pre;
}Stack Overflow用户
发布于 2015-09-25 06:54:42
当我开始新的项目时，我会不断地回到这个答案，并且必须通读评论才能记住，哦，对了，不要覆盖bootstrap类，不要忘记overflow-wrap，等等……
因此，您有股票pre-scrollable，这是垂直滚动，您可能还需要：
仅水平滚动
.pre-x-scrollable {
overflow: auto;
-ms-word-wrap: normal;
word-wrap: normal;
overflow-wrap: normal;
white-space: pre;
}垂直和水平滚动
.pre-xy-scrollable {
overflow: auto;
-ms-word-wrap: normal;
word-wrap: normal;
overflow-wrap: normal;
white-space: pre;
max-height: 340px;
}Stack Overflow用户
发布于 2018-04-01 04:27:28
较新版本的Bootstrap将样式应用于换行单词的pre和code。将此代码添加到我的样式表中可以解决这个问题：
pre code {
white-space: pre;
word-wrap: normal;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/10374171
复制相关文章
相似问题