时间戳

首页 > 解决方案 > 打印时如何更改div的宽度？

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

问题描述

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

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

标签： htmlcssreactjs

解决方案

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

假设您的 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 网格的更多信息，请参阅此答案

推荐阅读