Bootstrap 3 - Drucken / PDF

Ich muss meinen Lebenslauf drucken aber der alte trick

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

funktioniert nicht mehr seit Bootstrap 3 ist mobile-first (start aus dem kleinen Gerät, und fügen Sie dann media queries für größeren Bildschirm), also wenn ich Druck mein browser ist, halten die mobilen 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 mir nicht neu erfinden, bootstrap 3 natürlich und ich kann nicht die Verwendung von bootstrap 2 da die syntax geändert wird.

Ich habe eine schöne Vorlage für Lebenslauf, und ich möchte zu halten es auch auf der pdf/print-format.

Dank

InformationsquelleAutor mtt | 2013-08-28
  1. 9

    Bin ich den meisten Fällen erwarte ich von der print-in die nicht-horizontale version vielleicht? In Ihrem Fall könnten Sie versuchen, die Gitter Regeln auf der print-media-query.

    In der Fall Sie die small grid (col-sm-*) Standard, b.e.

        <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 Netz.weniger ersetzen @media (min-width: @screen-tablet) { mit @media (min-width: @screen-tablet), print { (fügen Sie drucken, finden Sie unter: CSS media queries: max-width ODER max-height)
    Neu kompilieren, bootstrap und Ihr pdf wird nach Links /rechts wie Bildschirm jetzt.

    Ohne Weniger Sie könnten versuchen, hinzufügen, um bestimmte css-Regeln für Ihren Fall wie:

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

    Hinweis drucken.weniger enthält spezifische Regeln für Printmedien. Dieses ist zum ausblenden der Navigationsleiste durch ein Beispiel. Auch die utilities-Klassen: http://getbootstrap.com/css/#responsive-utilities haben Drucken-Klassen.

    Wenn Ihr browser akzeptieren die @viewport (siehe: http://docs.webplatform.org/wiki/css/atrules/@viewport) wird es möglich sein, vielleicht ist zu tun:
    @media print {@viewport {width:1200px;} } bevor die bootstrap-CSS lädt

    • Ich war auf der Suche, um das problem in die falsche Richtung (html-zu-pdf-Konverter -, Kraft-chrome für die Verwendung eines bestimmten media-query...) Die Lösung war so einfach und unter meinen Augen, aber ich konnte es sehen. Vielen, vielen Dank!
    InformationsquelleAutor Bass Jobsen
  2. 5

    Hinzufügen eines print media query für mich gearbeitet. Dies ist, was ich schließlich stolperte auf.

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

    In meinem Projekt gab ich das gleiche problem. Da habe ich eine app.less - Datei, in die ich importieren bootstrap.less Quelle habe ich Folgendes:

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

    Das ist, was er getan hat in der Bootstrap-s grid.less Datei

    Vielleicht ist es nicht die saubere Lösung, aber es ist 3-code-Zeilen entfernt 😉

    InformationsquelleAutor balanza
Schreibe einen Kommentar