打印时如何更改div的宽度？答案

【问题标题】：How do you change the width of a div when printing?打印时如何更改div的宽度？
【发布时间】：2019-10-28 08:13:22
【问题描述】：

div 当前设置为 col-lg-8。我只希望在打印时它是 col-lg-12。我已经在移除打印时占用剩余空间的组件。

我意识到@media print 不起作用。我想知道我应该使用与 d-print 相关的东西。

【问题讨论】：

你应该使用这个属性来打印 css: media="print"
打印 css 是什么意思？
这是一个 XY 问题。我认为应该是“为什么@media print 不起作用？”
再次尝试使用@media print，但将!important添加到里面的所有样式中。
好吧，@media print 不起作用，因为我想将它从 col-lg-8 更改为 col-lg-12。我不相信这是可能的，因为 col-lg 是 bootstrap 的预定义类。

【解决方案1】：

我假设您正在为您的项目使用 Bootstrap（通过使用类 .col-lg-8）。不幸的是，Bootstrap 没有定义用于打印媒体查询的网格，它们只是有一些响应式实用程序类来使某些内容在打印时可见/隐藏，您必须自己定义它。 p>

假设您的 HTML 中有此更新所需的步骤非常简单：

<div class="container project-name">
  <div class="row">
    <div class="col-lg-4 col-print-12">AA</div>
    <div class="col-lg-4 col-print-6">BB</div>
  </div>
</div>

您需要定义一个专门用于打印的 CSS 块部分。

@media print {
  .project-name .col-print-1{ width: calc(1/12 * 100%); }
  .project-name .col-print-2{ width: calc(2/12 * 100%); }
  ...
}

有关用于打印的 Bootstrap 网格的更多信息，请参阅 this answer

【讨论】：

我在哪里放置@media 打印块？
在您的 CSS 文件中，例如 style.css，通常放在 CSS 的末尾，它就像响应式媒体查询一样工作
您可以使用 Chrome 进行测试，尝试打开打印对话框并设置您的纸张大小，甚至保存为 PDF 文件进行检查，无需实际打印