html - 打印时如何更改div的宽度？

Question

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

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

Answer 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 block 部分。

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

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