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
Hide a div in a page and make it visible only on print bootstrap 3 MVC 5
提问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>

