隐藏页面中的元素并使其仅在 Bootstrap 4 中打印时可见

Question

有一个网页向用户显示信息。如果用户决定打印它，我想包含屏幕上不需要的附加信息，但在打印时会很有帮助。

为了实现此行为，我试图使 div 仅在打印时可见。但它并没有起作用：

<div class="row col-md-12 visible-print">
   some txt here
</div>

我认为可见打印类仅适用于 Bootstrap 3，不适用于 4。

Answer 1

Bootstrap 4 有很棒的文档和实用程序..

打印显示

<div class="d-print-none">Screen Only (Hide on print only)</div>
<div class="d-none d-print-block">Print Only (Hide on screen only)</div>
<div class="d-none d-lg-block d-print-block">Hide up to large on screen, but always show on print</div>

更多信息 显示打印

Answer 2

我发现以下内容在 BS4 中很有用：

@media not print {
    .print-only {display: none !important}
}