2014-04-16 5 views
10

Es gibt eine Webseite mit Informationen für den Benutzer. Wenn der Benutzer entscheidet, es auszudrucken, möchte ich zusätzliche Informationen hinzufügen, die nicht auf dem Bildschirm erforderlich sind, aber beim Drucken hilfreich wären.Ein div auf einer Seite ausblenden und nur auf dem Druckerbootstrap sichtbar machen 3 MVC 5

Um dieses Verhalten zu implementieren, habe ich versucht, eine div nur zum Drucken sichtbar zu machen. Es hat aber nicht funktioniert:

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

Ich benutze Bootstrap 3 und fragte mich, ob es eine einfache Möglichkeit, dies zu erreichen ist?

+1

Definieren Sie ein Druck-Stylesheet. http://www.smashingmagazine.com/2011/11/24/how-to-set-up-a-print-style-sheet-2/ –

+1

Ich denke, die Tatsache, dass Sie versteckte-lg versteckt-md versteckt haben -sm hidden-xs über das div, du hast das div in allen Viewports effektiv versteckt. einfach ausblenden oder ein div für den Druck verwenden die folgenden zeigen:

content for non print
content for print only
SkyBlues87

+0

@ SkyBlues87 Ihr Vorschlag gearbeitet. Wenn Sie es bitte in eine Antwort setzen, damit ich die Frage schließen kann. Vielen Dank! –

Antwort

26

Ich denke, die Tatsache, dass Sie

verwendet haben
hidden-lg hidden-md hidden-sm hidden-xs 

über die div bedeutet, dass Sie effektiv es in allen Ansichtsfenstern versteckt haben. Um ein div für den Druck einfach auszublenden oder anzuzeigen, verwenden Sie Folgendes:

+0

Du hast meinen Tag gerettet !! Kämpfte mit @media Print und es funktionierte nicht für einige Kontrollen! Vielen Dank!! –

Verwandte Themen