如何使bootstrap3類兼容打印

我在頁面上有一組「col-md-6」div。它們佔用頁面寬度的一半，直到屏幕被調整到低於一定大小的位置，然後垂直堆疊。如何使bootstrap3類兼容打印

當我打印屏幕時，他們總是垂直堆疊，即使頁面可以完美地與div並排地讀取。

通過使用col-sm-6和col-xs-6的實驗，我發現獲得div並排打印的唯一方法是使用col-xs-6，但這意味着div不會堆疊一個非常小的（電話）顯示器。所以看起來引導程序認爲打印機的寬度/分辨率與手機相同。

我做錯了什麼？ bootstrap爲什麼認爲打印機的分辨率如此之低？我可以做任何改變嗎？

來源

2014-01-20 giorgio

我使用的克里斯蒂娜在這裏類似的問題給出了答案，

Printing page with bootstrap 3

即通過向CSS媒體打印看到COL-SM就像是COL-XS

@media print { 

.col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12 { 
    float: left; 
} 
.col-sm-12 { 
    width: 100%; 
} 
.col-sm-11 { 
    width: 91.66666666666666%; 
} 
.col-sm-10 { 
    width: 83.33333333333334%; 
} 
.col-sm-9 { 
    width: 75%; 
} 
.col-sm-8 { 
    width: 66.66666666666666%; 
} 
.col-sm-7 { 
    width: 58.333333333333336%; 
} 
.col-sm-6 { 
    width: 50%; 
} 
.col-sm-5 { 
    width: 41.66666666666667%; 
} 
.col-sm-4 { 
    width: 33.33333333333333%; 
} 
.col-sm-3 { 
    width: 25%; 
} 
.col-sm-2 { 
    width: 16.666666666666664%; 
} 
.col-sm-1 { 
    width: 8.333333333333332%; 
} 

    }

來源

2014-03-05 08:31:22 DiMa

作爲CSS的替代方法，如果您在Less中工作，則可以執行此操作。

@media print { .make-grid(md); }

remplace通過任何屏幕分辨率要使用 'MD'。我發現在我的情況下，md是屏幕上和紙上最好的。

這將在編譯Less代碼時調用bootstrap的.make-grid mixin。

來源

2015-05-07 05:54:38

如何使bootstrap3類兼容打印

回答

相關問題