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

问题描述 投票:0回答:2

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

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

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

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

html css twitter-bootstrap bootstrap-4
2个回答
6
投票

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>

更多信息 显示打印


3
投票

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

@media not print {
    .print-only {display: none !important}
}
© www.soinside.com 2019 - 2024. All rights reserved.