Bootstrap 3 - Drukuj/PDF

Question

muszę wydrukować swoje CV ale stara sztuczka

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

nie działa już od Bootstrap 3 jest ruchoma pierwszego (start od małego urządzenia, a następnie dodać zapytań o media dla większych ekran), więc po wydrukowaniu przeglądarki utrzymuję mobilne css.

Poprawnie:
http://f.cl.ly/items/3s320O0w04021s3b3j2j/print1.png
Źle:
http://f.cl.ly/items/3t300Z3c2e1q3G1m0r27/print2.png

Jak mogę rozwiązać ten problem? Nie mogę ponownie wymyślić bootstrap 3 oczywiście i nie mogę użyć bootstrap 2, ponieważ zmieniono składnię.

Zrobiłem ładny szablon do Curriculum Vitae i chciałbym zachować go również w formacie pdf/print.

Dzięki

Answer 1

jestem najbardziej przypadek i będzie oczekiwać na wydruk w wersji poziomej nie może? W twoim przypadku możesz spróbować zastosować reguły siatki w zapytaniu o media drukowane.

Jeśli domyślnie używana jest mała siatka (col-sm- *), 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 --> 

W swojej grid.less zastąpić @media (min-width: @screen-tablet) { z @media (min-width: @screen-tablet), print { (dodaj drukować, patrz: CSS media queries: max-width OR max-height) Dekompilacja bootstrap a pdf będzie miał prawo/lewo tak jak teraz ekranie.

Bez Mniej można spróbować dodać konkretne reguły CSS dla sprawy jak:

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

Note print.less zawiera szczególne przepisy dotyczące mediów drukowanych. Ta funkcja służy do ukrywania paska nawigacyjnego przez przykład. Również klasy narzędzi: http://getbootstrap.com/css/#responsive-utilities mają klasy Print.

Jeśli Twoja przeglądarka akceptuje @viewport (patrz: http://docs.webplatform.org/wiki/css/atrules/@viewport) będzie możliwe może zrobić: @media druku {@viewport {width: 1200 pikseli;}} przed załadowaniem bootstrap CSS

Answer 2

W moim projekcie Wydałem ten sam problem. Ponieważ mam plik app.less w którym importować źródła bootstrap.less, zrobiłem co następuje:

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

Który jest rzeczywiście to, co się robi w grid.less pliku uruchamiającego za

Może to nie jest czystsze rozwiązanie, ale to 3-liniowe linie kodu;)

Answer 3

Dodanie wyszukiwanego hasła do mediów drukowanych. Właśnie na to natknąłem się.

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