twitter-bootstrap - 隐藏页面中的 div 并使其仅在 print bootstrap 3 MVC 5 上可见

Question

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

为了实现这种行为，我试图制作一个 div仅在打印时可见。但它没有奏效:

<div class="visible-print hidden-lg hidden-md hidden-sm hidden-xs">

我正在使用 Bootstrap 3，想知道是否有一种简单的方法可以实现这一点？

Answer 1

我认为你使用的事实

hidden-lg hidden-md hidden-sm hidden-xs

跨越 div 意味着您已有效地将其隐藏在所有视口(viewport)中。要简单地隐藏或显示用于打印的 div，请使用以下命令:

<div class="hidden-print">content for non print</div>

<div class="visible-print">content for print only</div>