在页面中隐藏 div 并使其仅在打印引导程序 3 MVC 5 上可见 [英] Hide a div in a page and make it visible only on print bootstrap 3 MVC 5

问题描述

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

为了实现这种行为，我试图使 div 仅在打印时可见.但它没有奏效:

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

解决方案

我认为你已经使用过的事实

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

跨越 div 意味着你已经有效地将它隐藏在所有视口中.要简单地隐藏或显示用于打印的 div，请使用以下内容:

<div class="hidden-print">非打印内容</div><div class="visible-print">仅用于打印的内容</div>

There is a web page showing information to the user. If the user decides to print it I want to include additional information that is not required on the screen, but would be helpful when printed.

In order to implement this behaviour I was trying to make a div visible only for printing. It hasn't worked though:

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

I'm using Bootstrap 3 and wondered if there is an easy way to accomplish this?

解决方案

I think the fact you've used

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

across the div means you've effectively hidden it across all viewports. To simply hide or show a div for print use the following:

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

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

这篇关于在页面中隐藏 div 并使其仅在打印引导程序 3 MVC 5 上可见的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！