Wordpress HTML 代码标签无响应答案

【问题标题】：Wordpress HTML code tag not responsiveWordpress HTML 代码标签无响应
【发布时间】：2014-02-12 19:58:40
【问题描述】：

如何控制 Wordpress 帖子中 CODE 标记的宽度或响应宽度？

在这篇文章的 cmets 部分下，文本“您可以使用这些 HTML 标记和属性：”及其后面的代码元素不适合此响应式网站设计的容器宽度。

这行代码示例只是延伸到它所在的容器之外。这是我正在处理的帖子：

我在 3 种不同的浏览器中都注意到了这个问题，这似乎是与引导程序相关的样式。非常感谢任何帮助。谢谢！

【问题讨论】：

【解决方案1】：

将 display:block 添加到代码标签看起来对我有用

code {
    display: block;
}

将其添加到您的 style.css 文件中

编辑请注意，这将为网站上的每个代码标签更改它，因此如果您不想这样做，您可以将其内联添加到该特定代码标签（这并不是最好的主意）：

<code style="display:block;"></code>

或者为它创建一个类：

code.code-block {
    display: block;
}
<code class="code-block"></code>

【讨论】：

也可以加上overflow-x:scroll;
这适用于明显的容器，但标签和属性仍然延伸到白色区域之外。请参阅更新后的帖子。 overflow-x:scroll 有效，但如果我们不必显示滚动条会更好。隐藏属性也可以，但如果我们能把它包装起来，那就最好了。

【解决方案2】：

请在 bootstrap.css 行 #983 上从 code 中删除 white-space: nowrap;

【讨论】：

这种方式可行，但不是最佳实践（当您的更改被长期遗忘并且您的 bootstrap.css 文件得到更新时，您的更改将被覆盖）。使用code { display: block; white-space: normal; } 创建您自己的styles.css 文件会很有帮助。然后将其设置为在 bootstrap.css 之后加载。这个简单的更改使其成为覆盖 bootstrap.css 样式属性的非常好的解决方案。