Question

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

我意识到@media打印无效。我想知道我应该使用与d-print相关的东西。

Answer 1

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

所需的步骤非常容易更新，前提是您的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

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

1 个答案: