Bootstrap 5：如何让打印效果与浏览器显示一致

你遇到的打印时元素不显示、背景色丢失问题，是浏览器默认打印样式和Bootstrap内置打印重置导致的，直接添加以下自定义CSS规则即可解决：

核心修复代码 #

将以下代码添加到你的自定义CSS区域（即<style>标签内的{{{css}}}位置）：

/* 打印样式重置 */
@media print {
  /* 强制打印背景色和图片 */
  * {
    -webkit-print-color-adjust: exact !important;
    color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  /* 确保所有元素默认显示（覆盖Bootstrap或浏览器的隐藏规则） */
  body, .container, .row, .col, .card, .card-body {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  /* 避免内容被分页截断 */
  .card, .section {
    page-break-inside: avoid !important;
  }

  /* 调整字体和间距，适配打印 */
  body {
    font-size: 12pt !important;
    line-height: 1.4 !important;
  }

  /* 如果有导航或其他不需要打印的元素，手动隐藏（可选） */
  .navbar, .print-hidden {
    display: none !important;
  }
}

补充说明 #

• 浏览器默认会禁用背景色打印，print-color-adjust系列属性强制开启该功能，兼容主流浏览器。
• Bootstrap 5的打印样式会对部分元素做隐藏或样式重置，上述代码强制恢复显示并保留原有样式。
• 可以根据你的简历结构，调整page-break-inside的应用元素，避免卡片、段落被分页拆分。

用户当前头部代码参考：

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Resume of {{basics.name}}</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous" media='all'>
  <script src="https://kit.fontawesome.com/30ebcf4eef.js" crossorigin="anonymous"></script>
  <style type="text/css">
  {{{css}}}
  </style>
</head>

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