Bootstrap 3 - Print/PDF

Question

Ich brauche meinen Lebenslauf zu drucken, aber der alte Trick

<link href="css/bootstrap.min.css" rel="stylesheet" media="print"> 

nicht mehr da Bootstrap arbeitet 3 Mobil erste (von kleinen Gerät beginnen und dann Medienanfragen für größere hinzufügen Bildschirm), also, wenn ich meinen Browser drucke, hält das mobile css.

Richtig:
http://f.cl.ly/items/3s320O0w04021s3b3j2j/print1.png
Falsch:
http://f.cl.ly/items/3t300Z3c2e1q3G1m0r27/print2.png

Wie kann ich dieses Problem beheben? Ich kann Bootstrap 3 natürlich nicht neu erfinden und ich kann Bootstrap 2 nicht verwenden, da die Syntax geändert wird.

Ich habe eine schöne Vorlage für Curriculum Vitae gemacht und möchte sie auch im PDF/Druckformat behalten.

Dank

Answer 1

ich den meisten Fällen bin ich in der nicht horizontale Version vielleicht die Druck erwarten wird? In Ihrem Fall könnten Sie versuchen, die Rasterregeln auf die Printmedienabfrage anzuwenden.

Wenn Sie das kleine Raster (col-sm- *) als Standard verwenden, wird z.

<div class="container"> 

    <div class="row"> 
     <div class="col-sm-6">Left</div> 
     <div class="col-sm-6">Right</div> 
    </div> 
    </div> <!-- /container --> 

In Ihrem grid.less ersetzen @media (min-width: @screen-tablet) { mit @media (min-width: @screen-tablet), print { (Anzeigendruck finden Sie unter: CSS media queries: max-width OR max-height) Recompile Bootstrap und Ihre pdf wird/rechts gerade jetzt wie Bildschirm verlassen haben.

Ohne Weniger könnten Sie versuchen, für Ihren Fall spezifische CSS-Regeln hinzufügen:

@media print 
{ 
    body {width:1200px;} 
    div[class|=col-]{float:left;} 
    .col-sm-6{width:50%} 
} 

Hinweis print.less enthält spezifische Regeln für die Printmedien. Dies wird verwendet, um die Navigationsleiste durch ein Beispiel zu verbergen. Auch die Utilities-Klassen: http://getbootstrap.com/css/#responsive-utilities haben Print-Klassen.

Falls Ihr Browser eine @viewport akzeptieren (siehe: http://docs.webplatform.org/wiki/css/atrules/@viewport) ist es vielleicht möglich sein wird, zu tun: @media print {@viewport {width: 1200px;}} vor den Bootstrap CSS Lasten

Answer 2

In meinem Projekt Ich habe das gleiche Problem ausgegeben. Da ich eine app.less Datei habe, in dem ich importieren Sie die bootstrap.less Quelle, ich habe folgendes:

@import "my_path/bootstrap.less"; 
@media print{ 
    .make-grid(sm); 
} 

Was eigentlich ist, was es getan hat in Bootstrap der grid.less Datei

Vielleicht ist es nicht die sauberere Lösung, aber es ist 3-Code-Zeilen entfernt;)

Answer 3

Hinzufügen einer Print-Media-Abfrage hat für mich gearbeitet. Darauf bin ich schließlich gestoßen.

@media print { 
    @page { 
    size: 330mm 427mm; 
    margin: 14mm; 
    } 
    .container { 
    width: 1170px; 
    } 
}