html - 如何制作 Twitter Bootstrap 的块水平滚动？

Question

根据示例https://getbootstrap.com/docs/4.3/content/code/#code-blocks<pre> ，bootstrap 仅支持开箱即用的垂直可滚动和自动换行块。如何使我拥有可水平滚动的未包装代码块？

Answer 1

诀窍是引导程序会覆盖元素的thewhite-space和 CSS3word-wrap属性。<pre>要实现水平滚动，请确保您的 CSS 中有以下内容：

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

Answer 2

这对我有用：

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

Answer 3

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

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