引导 HTML 打印（铬）

Question

我已经探索了一些 SO 问题，但还没有找到完整的答案。我正在使用带有 HTML 5 的引导程序。我正在尝试构建一个可以放在打印纸（8.5x11 或 A4）上的报告页面。但是，我在打印方面遇到了一些问题。

当我使用 ctrl+p 时，引导单元往往会堆叠，并且不会在桌面上保留它们所做的格式。任何其他格式（如字体颜色）都不会显示在打印预览中。边距也不一致。如何使用 bootstrap 构建一个在桌面版和打印版中看起来都一样的报表页面？

这是我正在使用的一个简短示例：

HTML

<div class="container">
  <div class="row">
   <div class="col-sm-6">
     <h2>Person Name</h2>
   </div>
   <div class="col-sm-6">
     <p>Height</p>
   </div>
 </div>
</div>

CSS

@media print{
   @page {
      size: A4;
      margin: 0cm;
    }
    html, body {
      width: 1024px;
    }
    body {
      margin: 0 auto;
    }
    nav {
      display: none;
    }
 }

打印时，“人名”和“身高”不是在相邻的列中，而是彼此堆叠在一起，这与桌面视图不同。

非常感谢任何帮助！

Answer 1

打印机边距可能会干扰列视图。

CSS：

@media print{
   @page {
      size: A4;
      margin: 0cm;
    }
    html, body {
      width: 1024px;
    }
    .container {
      width: auto;
    }
    body {
      margin: 0 auto;
    }
    nav {
      display: none;
    }
    .col-6-print{
      flex:0 0 50% !important;
    }
 }

html:

<div class="container">
  <div class="row">
    <div class="col-sm- col-6-print6">
      <h2>Person Name</h2>
    </div>
    <div class="col-sm-6 col-6-print">
      <p>Height</p>
    </div>
  </div>
</div>