嘿，别慌！针对你遇到的Bootstrap打印布局问题和默认页眉页脚的问题，我给你整理了具体的解决步骤：

首先，咱们得理清楚样式优先级和调试方法：

• 确保打印样式的加载顺序：你的print.css一定要放在Bootstrap的CSS之后加载，这样你的自定义样式才能覆盖Bootstrap的默认打印样式。比如：

<link rel="stylesheet" href="path/to/bootstrap.min.css">
<link rel="stylesheet" href="path/to/print.css" media="print">

• 重置并自定义打印样式：Bootstrap本身有一些默认的打印样式（比如隐藏某些组件、调整容器宽度），你可以在print.css里针对性覆盖，同时实现你的布局需求：

@media print {
  /* 重置Bootstrap容器的默认限制，让内容适应打印纸张 */
  .container {
    width: auto;
    max-width: 100%;
    padding: 0;
    margin: 0;
  }

  /* 隐藏不需要打印的板块：给要删除的元素加个`no-print`类 */
  .no-print {
    display: none !important;
  }

  /* 自定义打印字体和间距，适配打印需求 */
  body {
    font-size: 12pt;
    line-height: 1.5;
    color: #000; /* 打印时尽量用黑色，节省油墨 */
  }

  /* 强制分页（如果你的宣传册需要分页） */
  .page-break {
    page-break-after: always;
  }

  /* 去掉Bootstrap可能添加的阴影、圆角等不必要的打印样式 */
  .card {
    border: 1px solid #ccc;
    box-shadow: none;
    border-radius: 0;
  }
}

• 用浏览器工具调试打印样式：Chrome/Firefox都支持模拟打印媒体模式，按Ctrl+Shift+I打开开发者工具，点击右上角的「更多选项」→「渲染」→ 在「模拟CSS媒体类型」里选择「print」，这样你就能直接在浏览器里看到打印效果，实时调整样式，不用反复打印预览啦！

这个是浏览器自带的页眉页脚，咱们可以用CSS的@page规则来控制：

@media print {
  @page {
    size: A4; /* 指定纸张大小，比如A4、Letter */
    margin: 1cm; /* 调整边距，默认页眉页脚会占用边距空间 */
  }

  /* 覆盖浏览器默认的页眉页脚内容 */
  body::before,
  body::after {
    content: "" !important;
    visibility: hidden;
  }
}

另外，部分浏览器（比如Chrome）也可以在打印预览界面手动取消「页眉和页脚」的勾选，但用CSS能保证所有用户打印时都生效。

如果还是有布局问题，你可以对着调试工具检查具体元素的样式，看看是不是Bootstrap的某个类覆盖了你的设置，用更具体的选择器或者!important（尽量少用，但打印样式里偶尔用没问题）来强制覆盖。

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