web-dev-qa-db-fra.com

Comment faire défiler les blocs <pre> de Twitter Bootstrap horizontalement?

Selon les exemples http://Twitter.github.com/bootstrap/base-css.html#code , bootstrap prend uniquement en charge le défilement vertical et le format Word <pre> se bloque hors de la boîte. Comment puis-je faire en sorte que j'ai à la place des blocs de code déroulants à défilement horizontal?

twitter-bootstraphorizontal-scrollingpre
59
Suan

L'astuce est que bootstrap remplace les deux le white-space et le CSS3 Word-wrap attributs pour le <pre> élément. Pour réaliser le défilement horizontal, assurez-vous qu'il y a ceci dans votre CSS:

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

Cela a fonctionné pour moi:

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

Je reviens toujours à cette réponse lorsque je démarre de nouveaux projets et je dois lire les commentaires pour me souvenir, oh oui, ne remplacez pas la classe bootstrap et n'oubliez pas le débordement, etc. ...

Vous avez donc le stock pre-scrollable, qui ne fait que défiler verticalement, vous pouvez également souhaiter:

Défilement horizontal uniquement

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

Défilement vertical et horizontal

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

Les nouvelles versions de Bootstrap appliquent des styles à la fois à pre et code qui encapsulent les mots. L'ajout de cela à ma feuille de style a résolu le problème pour moi:

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