Вопрос по twitter-bootstrap – Как сделать Twitter Bootstrap's
 блоки прокручивать по горизонтали?

58

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

Ваш Ответ

4   ответа
14

когда начинаю новые проекты, и мне приходится читать комментарии, чтобы помнить, о, да, не переопределять класс начальной загрузки, не забывать об переполнении и т. Д.

Итак, у вас есть запасpre-scrollable, который является вертикальной прокруткой, вы также можете захотеть:

Horizontal only scrolling
.pre-x-scrollable {
    overflow: auto;
    -ms-word-wrap: normal;
    word-wrap: normal;
    overflow-wrap: normal;
    white-space: pre;
}
Vertical and Horizontal scrolling
.pre-xy-scrollable {
    overflow: auto;
    -ms-word-wrap: normal;
    word-wrap: normal;
    overflow-wrap: normal;
    white-space: pre;
    max-height: 340px;
}
23

pre {
    overflow-x: auto;
}
pre code {
    overflow-wrap: normal;
    white-space: pre;
}
Error: User Rate Limit Exceededoverflow-wrapError: User Rate Limit Exceeded
overflow-wrapError: User Rate Limit Exceededspotty implementationError: User Rate Limit Exceededword-wrapError: User Rate Limit Exceeded
82

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

pre {
  overflow: auto;
  word-wrap: normal;
  white-space: pre;
}
Error: User Rate Limit Exceededpre codeError: User Rate Limit Exceededoverflow:auto
Error: User Rate Limit Exceededwhite-space: pre-wrapError: User Rate Limit Exceeded
Error: User Rate Limit Exceeded
Error: User Rate Limit Exceededword-wrapError: User Rate Limit ExceededchangingError: User Rate Limit Exceededoverflow-wrapError: User Rate Limit Exceeded
1

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

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

Похожие вопросы