如何制作Twitter Bootstrap的< pre>块水平滚动? [英] How to make Twitter Bootstrap's <pre> blocks scroll horizontally?
本文介绍了如何制作Twitter Bootstrap的< pre>块水平滚动?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
根据示例 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的< pre>块水平滚动?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文