如何用Bootstrap栅格格式化HTML邮件？修改类名后CDN是否生效？

Hey there! Let's tackle your two key questions about Bootstrap grids in HTML emails—this is a tricky area because email clients have way stricter rendering rules than web browsers.

1. How to Format HTML Emails with Bootstrap Grids? #

First off: regular Bootstrap (the one you use for websites) isn't built for emails. Most email clients (especially Outlook desktop) don't support modern CSS features like flexbox or grid that regular Bootstrap relies on. Instead, you need to use a Bootstrap-style framework designed specifically for emails, which uses table-based layouts (the only reliable way to get consistent spacing across email clients).

Here's how to approach it:

• Use an email-focused Bootstrap alternative like Bootstrap Email or Foundation for Emails (formerly Zurb Ink). These frameworks replicate Bootstrap's grid logic but use tables under the hood, which works in all major email clients.
• If you need custom prefixed classes (like your m_-5028752718443096113col-sm-6), don't just rename classes in your HTML—modify the framework's source files (usually Sass variables) to generate prefixed classes automatically. For example, in Bootstrap Email, you'd set a Sass variable like:

  $prefix: 'm_-5028752718443096113';
  

  Then compile the CSS, and the resulting styles will target your prefixed classes.
• For a quick table-based grid example (no framework needed), you can manually build it like this (this is what email frameworks generate under the hood):

  <table role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%">
    <tr>
      <td width="50%" valign="top" style="padding: 0 10px;">
        <p>The quick brown fox jumps over the lazy dog near the bank of the river...</p>
      </td>
      <td width="50%" valign="top" style="padding: 0 10px;">
        <p>The quick brown fox jumps over the lazy dog near the bank of the river...</p>
      </td>
    </tr>
  </table>
  

2. Will the Modified Prefixed Classes Work with Bootstrap CDN? #

Short answer: No.

• The regular Bootstrap CDN's CSS is written to target default class names like col-sm-6. Your prefixed classes (m_-5028752718443096113col-sm-6) don't match any selectors in the CDN's stylesheet, so no styles will be applied.
• Even if you used the default class names, regular Bootstrap's CSS won't work reliably in emails. Most email clients ignore external CSS links (like the CDN) or don't support the CSS features Bootstrap uses (like flexbox). You need to use email-specific CSS that's either inline or embedded in a <style> tag (and even then, some clients will strip parts of it).

Key Email Best Practices to Remember #

• Inline your CSS: Use tools like Premailer to convert embedded styles to inline styles—this ensures styles are applied in clients that ignore <style> tags.
• Test everywhere: Use tools like Email on Acid or Litmus to preview your email in Outlook, Gmail, Apple Mail, and other major clients—rendering can vary wildly.
• Avoid complex CSS: Stick to basic CSS properties (padding, width, color) and table-based layouts for consistency.

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