如何制作Twitter Bootstrap的< pre>块水平滚动？ [英] How to make Twitter Bootstrap's <pre> blocks scroll horizontally?

问题描述

根据示例 https://getbootstrap.com/docs/4.3 / content / code /＃code-blocks ，引导程序开箱即用，仅支持垂直可滚动和文字环绕的< pre> 块。如何使它具有水平可滚动的未包装代码块？

Per the examples https://getbootstrap.com/docs/4.3/content/code/#code-blocks, bootstrap only supports vertically-scrollable and word-wrapped <pre> blocks out of the box. How do I make it so that I have horizontally-scrollable, unwrapped code blocks instead?

推荐答案

诀窍是引导程序会覆盖两者 空白和<$ c $的CSS3 自动换行属性c>< pre> 元素。要实现水平滚动，请确保CSS中有此功能。

The trick is that bootstrap overrides both the white-space and the CSS3 word-wrap attributes for the <pre> element. To achieve horizontal scrolling, ensure there's this in your CSS:

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

这篇关于如何制作Twitter Bootstrap的&lt; pre&gt;块水平滚动？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！