web-dev-qa-db-ja.com

Twitter Bootstrapの<pre>ブロックを水平にスクロールさせる方法は？

例ごとに http://Twitter.github.com/bootstrap/base-css.html#code 、bootstrapのみがサポート垂直スクロール可能で、ワードラップされた<pre>ブロックがすぐにブロックされます。代わりに、水平方向にスクロール可能なラップされていないコードブロックを作成するにはどうすればよいですか？

twitter-bootstraphorizontal-scrollingpre
59
Suan

秘Theは、bootstrap=オーバーライドbothwhite-space要素のWord-wrapおよびCSS3 <pre>属性をオーバーライドすることです。スクロール、CSSにこれがあることを確認してください：

pre {
  overflow: auto;
  Word-wrap: normal;
  white-space: pre;
}
83
Suan

これは私のために働いた：

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

私は新しいプロジェクトを開始するときにこの答えに戻り続け、覚えておくためにコメントを読む必要があります、ああ、そうです、bootstrapクラスをオーバーライドせず、オーバーフローラップなどを忘れないでください...

在庫があります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;
}
15
Rick Glos

Bootstrap=の新しいバージョンは、単語をラップするpreとcodeの両方にスタイルを適用します。これを私のスタイルシートに追加すると、問題が修正されました。

pre code {
        white-space: pre;
        Word-wrap: normal;
}
1
jarhill0