column - ¿Cómo hacer que los bloques<pre> de Twitter Bootstrap se desplacen horizontalmente?

bootstrap tables themes

Question

Según los ejemplos http://twitter.github.com/bootstrap/base-css.html#code , bootstrap solo admite bloques <pre> desplazables verticalmente y envueltos por palabras de fábrica. ¿Cómo lo hago para que tenga bloques de código desplazables horizontalmente y sin envolver?

Answer 1

El truco es que bootstrap anula los atributos de white-space y CSS3 para el elemento <pre> . Para lograr el desplazamiento horizontal, asegúrese de que esté esto en su CSS:

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

Answer 2

Esto funcionó para mí:

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

Answer 3

Las versiones más nuevas de Bootstrap aplican estilos tanto a pre como a code que envuelven palabras. Agregar esto a mi hoja de estilo me arregló el problema:

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

Answer 4

Sigo volviendo a esta respuesta cuando empiezo nuevos proyectos y tengo que leer los comentarios para recordar, oh sí, no anule la clase de arranque y no olvide el overflow-wrap, etc ...

Así que tiene el stock pre-scrollable , que es solo desplazamiento vertical, también puede desear:

Desplazamiento horizontal solamente

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

Desplazamiento vertical y horizontal

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