트위터 부트 스트랩을 만드는 방법

트위터 부트 스트랩을 만드는 방법

 블록이 수평으로 스크롤됩니까?

---

http://twitter.github.com/bootstrap/base-css.html#code 예제에 따라 부트 스트랩은 수직으로 스크롤 할 수있는 단어로 묶인 <pre>블록 만 지원합니다 . 가로로 스크롤 할 수 있고 래핑되지 않은 코드 블록을 대신 사용하려면 어떻게해야합니까?

---

트릭은 부트 스트랩 이 요소 의 및 CSS3 속성을 모두 재정의한다는 것 입니다. 수평 스크롤을 얻으려면 CSS에 다음이 있는지 확인하십시오.white-spaceword-wrap<pre>

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

---

이것은 나를 위해 일했습니다.

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

---

나는 새 프로젝트를 시작할 때 계속해서이 대답을 찾게되고 기억하기 위해 주석을 읽어야한다. 오 예, 부트 스트랩 클래스를 재정의하지 말고 오버플로 랩 등을 잊지 마세요.

따라서 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;
}

---

부트 스트랩의 최신 버전은 모두 스타일을 적용 pre하고 code랩 단어있다. 이것을 내 스타일 시트에 추가하면 문제가 해결되었습니다.

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

참고 URL : https://stackoverflow.com/questions/10374171/how-to-make-twitter-bootstraps-pre-blocks-scroll-horizontally