Как заставить блоки Twitter Bootstrap прокручиваться по горизонтали?

в примерах http://twitter.github.com/bootstrap/base-css.html#code, bootstrap поддерживает только вертикальную прокрутку и word-wrapped <pre> блоки из коробки. Как сделать так, чтобы вместо этого у меня были горизонтально прокручиваемые, развернутые блоки кода?

56
horizontal-scrolling pre twitter-bootstrap

4 ответов

фокус в том, что bootstrap переопределяет и на white-space и CSS3 с word-wrap атрибуты <pre> элемент. Чтобы достичь горизонтальной прокрутки, убедитесь, что в вашем CSS:

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

это сработало для меня:

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

Я продолжаю возвращаться к этому ответу, когда я начинаю новые проекты и должен читать комментарии, чтобы помнить, о да, не переопределяйте класс bootstrap и не забывайте overflow-wrap и т. д...

Итак, у вас есть запас 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;
}
13

новые версии Bootstrap применяют стили к обоим pre и code что переноса слов. Добавление этого в мою таблицу стилей исправило проблему для меня:

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