Wie man Twitter Bootstrap & lt; pre & gt; Blöcke blättern horizontal?

Pro die Beispiele http://twitter.github.com/bootstrap/base-css.html#code , bootstrap unterstützt nur vertikal-Scroll-und Wort-eingewickelt <pre> Blöcke aus der box. Wie kann ich es so machen, dass ich horizontal scrollbare, ausgepackt, code-Blöcke statt?

InformationsquelleAutor der Frage Suan | 2012-04-29

  1. 82

    Der trick ist, dass bootstrap überschreibt beide die white-space - und CSS3 - word-wrap Attribute für die <pre> element. Zu erreichen ist das horizontale scrollen, stellen Sie diese in Ihrer CSS:

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

    InformationsquelleAutor der Antwort Suan

  2. 22

    Dieser arbeitete für mich:

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

    InformationsquelleAutor der Antwort Matt Morey

  3. 13

    Ich immer wieder auf diese Antwort, wenn ich neue Projekte beginnen und zu Lesen, durch Kommentare zu denken Sie daran, oh ja, überschreiben nicht die bootstrap Klasse und vergessen Sie nicht, overflow-wrap, etc...

    So haben Sie die Lager pre-scrollabledie nur vertikal scrollen, können Sie auch wollen:

    Nur Horizontal scrollen

    .pre-x-scrollable {
    overflow: auto;
    -ms-word-wrap: normal;
    word-wrap: normal;
    overflow-wrap: normal;
    white-space: pre;
}

    Vertikalen und Horizontalen scrollen

    .pre-xy-scrollable {
    overflow: auto;
    -ms-word-wrap: normal;
    word-wrap: normal;
    overflow-wrap: normal;
    white-space: pre;
    max-height: 340px;
}

    InformationsquelleAutor der Antwort Rick Glos

  4. 1

    Neuere Versionen von Bootstrap anwenden von Stilen auf beiden pre und code dass wickeln Worten. Das hinzufügen dieser zu meinem stylesheet behoben das Problem für mich:

    pre code {
        white-space: pre;
        word-wrap: normal;
}

    InformationsquelleAutor der Antwort jarhill0

Schreibe einen Kommentar