twitter-bootstrap 在页面中隐藏 div 并使其仅在打印引导程序 3 MVC 5 上可见

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/23096766/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-21 20:31:05  来源:igfitidea点击:

Hide a div in a page and make it visible only on print bootstrap 3 MVC 5

twitter-bootstrap

提问by Ben Junior

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 divvisible only for printing. It hasn't worked though:

为了实现这种行为,我试图让一个div只对打印可见。但它没有奏效:

<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?

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

回答by SkyBlues87

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 意味着你已经有效地将它隐藏在所有视口中。要简单地隐藏或显示用于打印的 div,请使用以下命令:

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

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