HTML邮件中Bootstrap响应式失效问题求助

兄弟，我太懂你这种邮件样式失效的崩溃了！问题出在邮件客户端对CSS的支持和网页完全不一样，咱们一步步来解决：

为什么Bootstrap类没用？ #

大部分邮件客户端（比如Outlook、Gmail、苹果邮件）有两个核心限制：

• 完全不支持外部<link>引入的CSS文件（你写的<link href="css/bootstrap.min.css">在邮件里等于白写，客户端根本不会去加载你的服务器上的CSS）
• 很多客户端不识别类选择器（比如.container、.col-xl-12这些Bootstrap类，客户端根本解析不了）

具体解决步骤 #

1. 移除无效的外部CSS引用 #

直接删掉<head>里的<link>标签，它在邮件里起不到任何作用。

2. 把Bootstrap类的样式转成内联样式 #

邮件只认内联在HTML元素上的style属性，所以你需要把Bootstrap类对应的样式手动写进去：

• .container：通常是margin:0 auto; max-width:1140px;
• .row：display:flex; flex-wrap:wrap;（不过部分老客户端不支持flex，稳妥起见可以用表格布局，后面说）
• .col-xl-12：width:100%;
• .img-responsive：max-width:100%; height:auto;

3. 修改后的邮件正文代码示例 #

$body = "<div style='margin:0 auto; max-width:1140px;'>
    <div style='display:flex; flex-wrap:wrap;'>
        <div style='width:100%;'>
            <p style='padding-top:30px;color: #1f497d;'><b>XXXXXX</b></p>
            <p style='padding-bottom:15px;color: #1f497d;'>XXXX</p>
            <img style='max-width:100%; height:auto;' id='mail-logo' src='cid:logo_2u' width='500'>
            <p style='color: #1f497d;'><img style='max-width:100%; height:auto;' src='cid:location-icon'> Address here</p>
            <p style='color: #1f497d;'><img style='max-width:100%; height:auto;' src='cid:phone-icon'> +XXXXXX <img style='max-width:100%; height:auto;' src='cid:fax-icon'> +XXXXXX <img style='max-width:100%; height:auto;' src='cid:mobile-icon'> +XXXXXX</p>
            <p style='color: #1f497d;'><img style='max-width:100%; height:auto;' src='cid:email-icon'> XXXXXXX | XXXXX <img style='max-width:100%; height:auto;' src='cid:globe-icon'> XXXXXX</p>
        </div>
    </div>
</div>";

4. 进阶：用表格布局兼容老客户端 #

如果要兼容Outlook这类对flex支持很差的客户端，建议把div换成表格（邮件开发的行业惯例），比如：

$body = "<table width='100%' cellpadding='0' cellspacing='0'>
    <tr>
        <td align='center'>
            <table width='1140' cellpadding='0' cellspacing='0' style='max-width:1140px;'>
                <tr>
                    <td>
                        <p style='padding-top:30px;color: #1f497d;'><b>XXXXXX</b></p>
                        <p style='padding-bottom:15px;color: #1f497d;'>XXXX</p>
                        <img style='max-width:100%; height:auto;' id='mail-logo' src='cid:logo_2u' width='500'>
                        <p style='color: #1f497d;'><img style='max-width:100%; height:auto;' src='cid:location-icon'> Address here</p>
                        <p style='color: #1f497d;'><img style='max-width:100%; height:auto;' src='cid:phone-icon'> +XXXXXX <img style='max-width:100%; height:auto;' src='cid:fax-icon'> +XXXXXX <img style='max-width:100%; height:auto;' src='cid:mobile-icon'> +XXXXXX</p>
                        <p style='color: #1f497d;'><img style='max-width:100%; height:auto;' src='cid:email-icon'> XXXXXXX | XXXXX <img style='max-width:100%; height:auto;' src='cid:globe-icon'> XXXXXX</p>
                    </td>
                </tr>
            </table>
        </td>
    </tr>
</table>";

5. 确保PHP Mailer发送HTML邮件 #

别忘了在PHP Mailer里开启HTML模式：

$mail->isHTML(true); // 关键！告诉邮件客户端这是HTML邮件
$mail->Body = $body;

额外小技巧 #

如果觉得手动转内联样式麻烦，可以用专门的邮件CSS内联工具（直接在本地把Bootstrap的核心样式转成内联，不需要外链），不过手动写对于简单的布局反而更可控。

内容的提问来源于stack exchange，提问作者A Mak