引导HTML打印(铬)

Question

我已经探讨了许多这样的问题，但还没有找到完整的答案。我正在使用引导和HTML 5，我试图建立一个页面，可以适合印刷纸(8.5x11或A4)的报告。然而，我在印刷方面遇到了一些问题。

当我使用ctrl+p时，引导单元格倾向于堆叠，而不将它们的格式保存在桌面上。任何其他格式--比如字体颜色--都不会出现在打印预览中。利润率也不一致。如何使用引导和生成在桌面和打印中外观相同的报表页？

下面是我正在处理的一个简短的例子：

<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>