60

https://getbootstrap.com/docs/4.3/content/code/#code-blocksの例によると、ブートストラップは垂直スクロール可能なブロックとワードラップされ<pre>たブロックのみをすぐにサポートします。代わりに、水平方向にスクロール可能なラップされていないコード ブロックを作成するにはどうすればよいですか?

4

4 に答える 4

85

秘訣は、ブートストラップが要素のと CSS3属性の両方をオーバーライドすることです。水平スクロールを実現するには、CSS に以下があることを確認してください。white-spaceword-wrap<pre>

pre {
  overflow: auto;
  word-wrap: normal;
  white-space: pre;
}
于 2012-04-29T17:20:51.493 に答える
16

新しいプロジェクトを開始し、コメントを読んで覚えておく必要があるときは、この回答に戻ってきます。そうです、ブートストラップクラスをオーバーライドしないでください。オーバーフローラップなどを忘れないでください...

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;
}
于 2015-09-24T22:54:42.070 に答える