如何制作Twitter Bootstrap的<pre> blocks scroll horizontally?</pre>

Question

根据示例http://twitter.github.com/bootstrap/base-css.html#code，bootstrap仅支持开箱即用的可垂直滚动和自动换行<pre>块。我如何制作它以便我可以使用水平可滚动的，未包装的代码块？

Answer 1

诀窍是bootstrap会覆盖 {/ 1}}和white-space元素的CSS3 word-wrap属性。要实现水平滚动，请确保CSS中有这个：

<pre>

Answer 2

这对我有用：

pre {
    overflow-x: auto;
}
pre code {
    overflow-wrap: normal;
    white-space: pre;
}

Answer 3

当我开始新项目并且必须阅读评论以便记住时，我一直回到这个答案，哦，是的，不要覆盖引导类，不要忘记溢出包装等......

所以你有股票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;
}

Answer 4

较新版本的Bootstrap将样式应用于包含单词的pre和code。将其添加到我的样式表为我解决了问题：

pre code {
        white-space: pre;
        word-wrap: normal;
}