如何在 Wordpress 中显示内联引导按钮而不是每行一个？

Question

我正在建立一个新的 Wordpress 网站并想使用 Bootstrap。

但是，当我复制按钮代码Straight from this Bootstrap Documentation时，像这样：

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<div class="btn-group" role="group" aria-label="...">
  <button type="button" class="btn btn-default">Left</button>
  <button type="button" class="btn btn-default">Middle</button>
  <button type="button" class="btn btn-default">Right</button>
</div>

我得到的只是一系列按钮，每个按钮都显示在单独的一行中，如下所示：

使它们显示在同一行的唯一方法是将代码作为连续的一行，如下所示：

<div class="btn-group" role="group" aria-label="..."> <button type="button" class="btn btn-default">Left</button><button type="button" class="btn btn-default">Middle</button><button type="button" class="btn btn-default">Right</button> </div>

问题很大的是我想使用它们的应用程序，也不是 Bootstrap 文档显示代码的方式。

我在同一台服务器上的几个 WordPress 网站上尝试了此代码。都有同样的问题。

然后我复制了相同的代码并将其粘贴到一个简单的 html 文件中，这次它显示正确。 You can check the results by clicking here. 所以这不是服务器问题，而且，我在一个干净的 WordPress 环境中尝试了它，没有其他插件处于活动状态，并且有多个主题。仍然显示问题。

我找到了similar question here called: Why my bootstrap buttons don't look so good?，建议的解决方案是添加 Bootstrap 主题链接（尽管其他在线资源表明此主题不是必需的）。

所以我添加了一个主题，叫做：Cerulean a CDN，像这样：

<link href="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.7/cerulean/bootstrap.min.css" rel="stylesheet"/>

结果的唯一变化是按钮颜色发生了变化，这意味着我的 WordPress 安装正在读取主题。但是，问题仍然存在。

这个问题与引用的问题不同，因为另一个问题不依赖于 Wordpress 平台。 请阅读下面的编辑部分。

那么，出现这种问题的原因可能是什么？我发现的解决方法（将整个代码写成一行）对我来说不是一个实用的解决方案。

提前致谢。

编辑： 似乎问题与WordPress本身有关。这是因为 WordPress 在每一行之后添加了<br />。这个<br /> 不会出现在帖子创建者面前，但它确实会出现在之后的邮政编码中。

请按照@Andrei Gheorghiu 的建议检查这两个代码。

帖子 1：没有 Bootstrap CSS 或 JS 表单：

https://audio.coptic-treasures.com/no-bootstrap/

按钮显示为堆叠。 Here is the code on jsfiddle.net

帖子 2：使用 Bootstrap CSS 和 JS 表单：

https://audio.coptic-treasures.com/bootstrap/

按钮也出现堆叠。 Here is the code on jsfiddle.net

那么现在的问题是如何使用默认的 Bootstrap 代码和默认的 WordPress 行为？

编辑 2：

我找到的唯一解决方案是通过将此函数添加到主题的 function.php 中来改变默认的 WordPress 行为：

remove_filter( 'the_content', 'wpautop' );

请参考这个WordPress codex reference.

此解决方法解决了问题并正确显示了按钮。但是，它使编辑帖子成为问题。有没有办法编写一个函数来将此过滤器限制为某些 html 类（以便我可以将其应用于 Bootstrap 类）？

谢谢。

Answer 1

如果您希望 WordPress 不为每个 carriage-return 字符添加 <br> 标签，并且为每组连续的 carriage-return 字符添加 <p> 标签，您有两种选择：

• 禁用the_content 上的wpautop 过滤器。您可以在全球范围内使用

remove_filter( 'the_content', 'wpautop' );

...在您的functions.php 中或使用toggle autop 插件逐个发布（我还没有测试过）。请记住，这很可能会改变受影响内容的外观（因为它不会再添加 <p> 包装器和 <br> 标记）。

• 第二种选择是在本地处理问题，方法是将标记更改为不再包含carriage-return 字符：

<div class="btn-group" role="group" aria-label="..."
  ><button type="button" class="btn btn-default">Left</button
  ><button type="button" class="btn btn-default">Middle</button
  ><button type="button" class="btn btn-default">Right</button></div>