Twitter Bootstrap Drukuje w XS

Question

Używam Twitter Bootstrap 3, ale kiedy idę do wydrukowania mojej strony (poprzez Plik> Drukuj) to drukowanie strony w XS (widok Mobile), jak zmusić go do użycia i wydrukować w MD (Widok pulpitu).

Działa tylko dobrze w IE wersji 9 i poniżej. Każda inna przeglądarka i IE 10+ mają problem.

Answer 1

Aby go naprawić zrobiłem dodać następujące do mojego CSS

@media print { 
    body { 
    margin: 0; 
    padding: 0 !important; 
    min-width: 768px; 
    } 
    .container { 
    width: auto; 
    min-width: 750px; 
    } 
} 

Wydaje się, że pracował dla mnie świetnie.

Answer 2

.col-xs-X jest poza zapytaniami o media, dlatego też drukuje. Wszystkie kolumny mają ten sam rozmiar: 100/12 = 8,333333%, więc .col-lg-6 i .col-sm-6 i .col-xs-6 i .col-md-6 stanowią 50% wartości .container/.container-fluid.

Aby otrzymać wydrukowaną stronę, aby wydrukować kolumn, należy dodać zapytanie prasie

@media print { 
    .container { 
     max-width: none!important; 
     width: 100%!important; 
     padding-left: 0; 
     padding-right: 0; 
    } 
    .row { 
     margin-left: -1%; 
     margin-left: -1%; 
    } 
    [class*="col-"] { 
     float: left; 
     padding-left: 1%; 
     padding-right: 1%; 
    } 
    .col-sm-12, 
    .col-md-12, 
    .col-lg-12 { 
     width: 100% 
    } 
    .col-sm-11, 
    .col-md-11, 
    .col-lg-11 { 
     width: 91.66666667% 
    } 
    .col-sm-10, 
    .col-md-10, 
    .col-lg-10 { 
     width: 83.33333333% 
    } 
    .col-sm-9, 
    .col-md-9, 
    .col-lg-9 { 
     width: 75% 
    } 
    .col-sm-8, 
    .col-md-8, 
    .col-lg-8 { 
     width: 66.66666667% 
    } 
    .col-sm-7, 
    .col-md-7, 
    .col-lg-7 { 
     width: 58.33333333% 
    } 
    .col-sm-6, 
    .col-md-6, 
    .col-lg-6 { 
     width: 50% 
    } 
    .col-sm-5, 
    .col-md-5, 
    .col-lg-5 { 
     width: 41.66666667% 
    } 
    .col-sm-4, 
    .col-md-4, 
    .col-lg-4 { 
     width: 33.33333333% 
    } 
    .col-sm-3, 
    .col-md-3, 
    .col-lg-3 { 
     width: 25% 
    } 
    .col-sm-2, 
    .col-md-2, 
    .col-lg-2 { 
     width: 16.66666667% 
    } 
    .col-sm-1, 
    .col-md-1, 
    .col-lg-1 { 
     width: 8.33333333% 
    } 
} 

Answer 3

Proszę przeczytać http://getbootstrap.com/getting-started/#support-printing

Istotą jest to, że przeglądarka obsługuje zapytań o media błędnie/dziwnie kiedy druk. Nie używają tej samej szerokości widoku CSS co fizyczna szerokość papieru.

Obejście opcje obejmują:

• Embrace wyjątkowo małą siatkę i upewnić się, że strona wygląda dopuszczalne pod nią.
• Dostosuj wartości @screen-* Mniej zmiennych, aby papier do drukarki był uważany za większy niż bardzo mały.
• Dodaj niestandardowe zapytania o media, aby zmienić punkty przerwania siatki tylko dla nośników wydruku.

Answer 4

Drukowanie jest trudne w większości przeglądarek - problem polega na tym, że w zależności od przeglądarki, domyślnego rozmiaru papieru i orientacji (portret lub krajobraz) oraz bieżącej fali w Sydney strona będzie drukowana w rozdzielczości 72ppi, 96ppi lub 144ppi.

W Bootstrap zapytanie o media ustanawia pasmo szerokości piksela ... np. "xs" ma rozmiar od 544 do 767 pikseli, więc w zależności od (wydrukowanej) szerokości strony witryna może powrócić do wariantów szerokości "xs" lub "sm" podczas drukowania.

Rozwiązania wymienione powyżej przy użyciu @media print {} w większości przypadków będą skuteczne - ale faktem pozostaje, że strona musi być zakodowana z uwzględnieniem drukowania.

Mam przykład pod adresem vinorodrigues/print-ready, który próbuje uwzględnić niektóre z tych problemów i uwag.