Bootstrap 3 - Stampa/PDF

Question

ho bisogno di stampare il mio CV, ma il vecchio trucco

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

non funziona più da Bootstrap 3 è mobile-first (a partire da dispositivo di piccole dimensioni e quindi aggiungere le media query per i più grandi schermo) così quando stampo il mio browser è mantenere il css mobile.

corretta:
http://f.cl.ly/items/3s320O0w04021s3b3j2j/print1.png
Sbagliato:
http://f.cl.ly/items/3t300Z3c2e1q3G1m0r27/print2.png

Come posso risolvere questo problema? Ovviamente non posso re-inventare bootstrap 3 e non posso usare bootstrap 2 dato che la sintassi è cambiata.

Ho fatto un bel modello per Curriculum Vitae e mi piacerebbe tenerlo anche in formato pdf/stampa.

Grazie

Answer 1

Sono più caso farò aspettare la stampa nella versione non orizzontale forse? Nel tuo caso potresti provare ad applicare le regole della griglia sulla query del supporto di stampa.

Nel caso in cui si utilizza la griglia piccola (col-sm- *) predefinita, 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 --> 

Nella tua grid.less sostituire @media (min-width: @screen-tablet) { con @media (min-width: @screen-tablet), print { (aggiungere di stampa, vedere: CSS media queries: max-width OR max-height) Ricompilate bootstrap e il vostro pdf avrà a sinistra/destra dello schermo, proprio come ora.

Senza Meno si potrebbe tentare di aggiungere regole CSS specifiche per il vostro caso come:

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

Nota print.less contiene norme specifiche per i supporti di stampa. Questo è usato per nascondere la barra di navigazione con l'esempio. Anche le classi di utilità: http://getbootstrap.com/css/#responsive-utilities hanno classi di stampa.

Se il browser accetta il @viewport (vedi: http://docs.webplatform.org/wiki/css/atrules/@viewport) sarà possibile forse fare: @media print {@viewport {width: 1200px;}} prima del caricamento di bootstrap CSS

Answer 2

Nel mio progetto Ho emesso lo stesso problema. Dal momento che ho un file di app.less in cui importare la fonte bootstrap.less, ho fatto la seguente:

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

che è in realtà ciò che è fatto in un file di bootstrap grid.less

forse non è la soluzione più pulita, ma è 3 linee di codice di distanza;)

Answer 3

L'aggiunta di una query del supporto di stampa ha funzionato per me. Questo è ciò su cui alla fine sono incappato.

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