如何在 Wordpress 中内联显示 Bootstrap 按钮而不是每行一个? [英] How to show Bootstrap Buttons inline instead of one per line in Wordpress Specifically?

问题描述

我正在构建一个新的 Wordpress 网站并希望使用 Bootstrap.

但是，当我复制按钮代码时

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

<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">右</button>

我想将它们用于哪些应用程序是非常有问题的，而且 Bootstrap 文档也不是这样显示代码的.

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

然后我复制了相同的代码并将其粘贴到一个简单的 html 文件中，这次它显示正确.

那么，出现这种问题的原因可能是什么?我发现的解决方法(通过将整个代码写成一行)对我来说不是一个实用的解决方案.

提前致谢.

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

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

帖子 1:没有 Bootstrap CSS 或 JS 表:

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

按钮出现堆叠.这是jsfiddle.net上的代码

帖子 2:使用 Bootstrap CSS 和 JS 表:

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

按钮也堆叠在一起.这是jsfiddle.net上的代码

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

编辑 2:

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

<代码>remove_filter('the_content', 'wpautop');

请参阅此 WordPress 代码参考.

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

谢谢.

解决方案

如果您希望 WordPress 不为每个 carriage-return 字符添加 <br> 标签和<p> 标签为每组连续的 carriage-return 字符你有两个选择:

• 在 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">左</button><button type="button" class="btn btn-default">Middle</button><button type="button" class="btn btn-default">右</button></div>

I am building a new Wordpress Website and want to utilize Bootstrap.

However, when I copy the buttons code Straight from this Bootstrap Documentation, like this:

<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>

All what I get is a series of buttons shown each one at in a separate line, like this:

The only way to make them show on the same line is to have the code as one continuous line, like this:

<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>

which is very problematic is the application I want to use them for, and also it is not how the Bootstrap documentation show the code.

I tried this code on several of my WordPress sites on the same server. All have the same problem.

Then I copied the same code and pasted it into a simple html file, this time it showed correctly. You can check the results by clicking here. So it is not a server problem, but also, I tried it in a clean WordPress environment with no other plugins active, and with multiple themes. Still showing the problem.

I found a similar question here called: Why my bootstrap buttons don't look so good?, where the suggested solution was to add the Bootstrap theme link (although other online resources suggested that this theme is not essential).

So I added a theme called: Cerulean a CDN, like this:

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

The only change in results is that the button colors changed, which means that my WordPress installation is reading the theme. However, the problem remains the same.

This problem differs from the referenced question as the other question does not depend on Wordpress platform. Please read the edit section below.

So, What could be the cause of such a problem? The workaround that I found (by making the whole code one line) is not a practical solution for me.

Thanks in advance.

EDIT: It seems that the problem is related to WordPress itself. This is because WordPress adds <br /> after each line. This <br /> does not appear to the post creator, however it does appear in the post code afterwards.

Please check these two codes, as suggested by @Andrei Gheorghiu.

Post 1: No Bootstrap CSS or JS sheets:

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

The buttons appear stacked. Here is the code on jsfiddle.net

Post 2: Using Bootstrap CSS and JS sheets:

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

The buttons appear stacked too. Here is the code on jsfiddle.net

So the question now is how to use the default Bootstrap code with the default WordPress behavior?

EDIT 2:

The only solution I found is to alter the defualt WordPress behaviuor by adding this function to the theme's function.php:

remove_filter( 'the_content', 'wpautop' );

Please refer to this WordPress codex reference.

This workaround solved the issue and displayed the buttons correctly. However, it makes editing posts problematic. Is there a way to write a function to limit this filter to certain html classes (so I can apply it to the Bootstrap classes)?

Thanks.

解决方案

If you want WordPress not to add <br> tags for each carriage-return character and <p> tags for each group of consecutive carriage-return characters you have two options:

• disable the wpautop filter on the_content. You can do it globally, using

remove_filter( 'the_content', 'wpautop' );

...in your functions.php or on a post by post basis using toggle autop plugin (i haven't tested it). Keep in mind this will most likely change how the affected content looks (as it will no longer have <p> wrappers and <br> tags added to it).

• the second option is to deal with the problem locally, by changing the markup to no longer include carriage-return chars:

<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>

这篇关于如何在 Wordpress 中内联显示 Bootstrap 按钮而不是每行一个?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！