SyntaxHighlighter和bootstrap之间的边距问题？

Question

SyntaxHighlighter和bootstrap之间的边距问题？

javascriptcsstwitter-bootstrapsyntax-highlightingsyntaxhighlighter

3

我有这段代码。

<pre class="brush: xml">&lt;?xml version=&quot;1.0&quot; encoding=&quot;utf-8&quot;?&gt;
&lt;Test xmlns:xsi=&quot;http://www.w3.org/2001/XMLSchema-instance&quot; xmlns:xsd=&quot;http://www.w3.org/2001/XMLSchema&quot;&gt;
    &lt;ABC&gt;
      &lt;A&gt;B&lt;/A&gt;
    &lt;/ABC&gt;
&lt;/Test&gt;</pre>

还有这个JavaScript。

<script type="text/javascript">SyntaxHighlighter.all();</script>

在此之前，我已经加载了以下内容：

XRegExp.js
shCore.js
shBrushXml.js

还有css文件：

shCoreRDark.css
shThemeRDark.css

但是它看起来像这样： Bug example

问题是第一行跨越了1和2行。边距不正确或其他什么问题！？我不知道。使用FireBug我找不到问题:(

顺便问一下... 是否有可能禁用/隐藏右上角的“？”按钮？

示例 (解析错误!?): http://jsfiddle.net/Zrm2G/

- PatrickB

1

我们需要看到你的CSS。最好能够使用JSFiddle或类似工具展示你页面的工作示例？你是否也尝试使用Firebug检查HTML/CSS，以查看哪些CSS规则被应用于<pre>标签？ - James King

我准备了一个JSFiddle示例。我正在使用Twitter Bootstrap。 - PatrickB

就像 http://jsfiddle.net/Zrm2G/ 一样。 - PatrickB

你不能使用jsFiddle链接到GITHUB上的js文件。 - epascarello

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Derek Eatough · Accepted Answer

我认为问题与SyntaxHighlighter使用class="container"有关，这个名称与BootStrap发生了冲突。

特别是，bootstrap.css添加了以下内容，在我们可显示的内容之前放置了边距：

.container:before, .container:after {
    display: table;
    content: "";
    line-height: 0;
}

我通过在我的网站主CSS文件中重写这个CSS来解决这个问题，当容器类在SyntaxHighlighter表格内使用时：

.syntaxhighlighter table .container:before {
    display: none !important;
}