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

Question

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

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

684 4

twitter-bootstrap pre horizontal-scrolling

4 ответов:

Comments

Ничего не найдено.

Suan · Accepted Answer · 2012-04-29 20:20:51

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

Matt Morey · Accepted Answer · 2013-12-06 06:08:32

это сработало для меня:
pre {
    overflow-x: auto;
}
pre code {
    overflow-wrap: normal;
    white-space: pre;
}

Rick Glos · Accepted Answer · 2015-09-25 01:54:42

Я продолжаю возвращаться к этому ответу, когда начинаю новые проекты и должен читать комментарии, чтобы помнить, о да, не переопределяйте класс 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;
}

jarhill0 · Accepted Answer · 2018-03-31 23:59:45

новые версии Bootstrap применяют стили к обоим pre и code что переноса слов. Добавление этого в мою таблицу стилей исправило проблему для меня:
pre code {
        white-space: pre;
        word-wrap: normal;
}