WordPress中如何让Bootstrap按钮横向排列而非换行显示？

我完全懂你的困扰——全局关掉wpautop确实能解决按钮竖排的问题，但文章编辑的自动排版功能就废了，得不偿失。其实我们可以只针对Bootstrap的按钮组类做过滤，既保留全局的自动排版，又让按钮组正常横向排列。

问题的根源是wpautop会把你代码里的换行自动转换成<br>标签，而Bootstrap的.btn-group需要按钮之间没有额外的换行或块级元素干扰，否则布局就会被打乱。下面给你两个实用的方案：

方案一：自动识别按钮组并清理换行（无需修改现有内容） #

把这段代码加到你主题的functions.php文件里：

function fix_bootstrap_btn_group_autop($content) {
    // 匹配带有btn-group或btn-toolbar类的div容器
    $pattern = '/(<div[^>]*class="[^"]*(btn-group|btn-toolbar)[^"]*"[^>]*>)(.*?)(<\/div>)/is';
    // 移除容器内部的<br>标签和所有换行符
    $replacement = '$1' . preg_replace('/<br\s*\/?>|\n|\r/', '', '$3') . '$4';
    $content = preg_replace($pattern, $replacement, $content);
    return $content;
}
// 优先级设为9，比wpautop的默认优先级10高，确保先执行我们的处理
add_filter('the_content', 'fix_bootstrap_btn_group_autop', 9);

原理说明： #

• 这个函数会自动扫描文章内容里所有带.btn-group或.btn-toolbar的div，把容器内部的<br>标签和换行符全部清掉，让按钮紧密排列，Bootstrap的布局就能正常生效。
• 优先级设为9是关键，这样我们的处理会在wpautop之前执行，不会被它的换行处理覆盖。
• 其他内容的自动排版完全不受影响，文章段落依然会正常生成<p>和<br>。

方案二：用短代码包裹按钮组（更可控） #

如果你希望手动控制哪些区块需要处理，短代码是个更安全的选择。同样把这段代码加到functions.php：

function bootstrap_btn_group_shortcode($atts, $content = null) {
    // 清理短代码内部的换行和<br>标签，输出标准的按钮组结构
    $clean_content = preg_replace('/<br\s*\/?>|\n|\r/', '', $content);
    return '<div class="btn-group" role="group" aria-label="...">' . do_shortcode($clean_content) . '</div>';
}
add_shortcode('btn_group', 'bootstrap_btn_group_shortcode');

使用方法： #

在文章编辑器里用短代码包裹你的按钮代码就行，哪怕换行写也没问题：

[btn_group]
<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>
[/btn_group]

优缺点对比： #

• 方案一适合已经插入了大量按钮组的场景，不需要修改现有内容，自动生效。
• 方案二更灵活可控，不会误处理其他类似结构的div，适合新内容的编辑。

这两个方案都能完美解决你的问题，不用再纠结全局禁用wpautop的副作用啦！

内容的提问来源于stack exchange，提问作者Atef Wagih