覆蓋響應bootstrap 3 @media print

Question

我試圖防止事件javascript:print()上的引導程序的響應功能，使我的網頁保留在我已確定的列網格排列中，無論像素大小。

我可以像this answer那樣用不同的斷點重新編譯並在打印時提供第二個css文件。

但我不想要提供新的CSS文件。

我試圖做這樣的事情

@media print and (min-width: 480px) { 
    .col-xs-12 { 
    float: none; 
    width: 100%; 
    } 
    ..... 
} 

Answer 1

這是我想出了，從引導的最高分辨率@media查詢直取

@media print { 
    .col-md-1, 
    .col-md-2, 
    .col-md-3, 
    .col-md-4, 
    .col-md-5, 
    .col-md-6, 
    .col-md-7, 
    .col-md-8, 
    .col-md-9, 
    .col-md-10, 
    .col-md-11, 
    .col-md-12 { 
    float: left; 
    } 
    .col-md-12 { 
    width: 100%; 
    } 
    .col-md-11 { 
    width: 91.66666666666666%; 
    } 
    .col-md-10 { 
    width: 83.33333333333334%; 
    } 
    .col-md-9 { 
    width: 75%; 
    } 
    .col-md-8 { 
    width: 66.66666666666666%; 
    } 
    .col-md-7 { 
    width: 58.333333333333336%; 
    } 
    .col-md-6 { 
    width: 50%; 
    } 
    .col-md-5 { 
    width: 41.66666666666667%; 
    } 
    .col-md-4 { 
    width: 33.33333333333333%; 
    } 
    .col-md-3 { 
    width: 25%; 
    } 
    .col-md-2 { 
    width: 16.666666666666664%; 
    } 
    .col-md-1 { 
    width: 8.333333333333332%; 
    } 
    .col-md-pull-12 { 
    right: 100%; 
    } 
    .col-md-pull-11 { 
    right: 91.66666666666666%; 
    } 
    .col-md-pull-10 { 
    right: 83.33333333333334%; 
    } 
    .col-md-pull-9 { 
    right: 75%; 
    } 
    .col-md-pull-8 { 
    right: 66.66666666666666%; 
    } 
    .col-md-pull-7 { 
    right: 58.333333333333336%; 
    } 
    .col-md-pull-6 { 
    right: 50%; 
    } 
    .col-md-pull-5 { 
    right: 41.66666666666667%; 
    } 
    .col-md-pull-4 { 
    right: 33.33333333333333%; 
    } 
    .col-md-pull-3 { 
    right: 25%; 
    } 
    .col-md-pull-2 { 
    right: 16.666666666666664%; 
    } 
    .col-md-pull-1 { 
    right: 8.333333333333332%; 
    } 
    .col-md-pull-0 { 
    right: 0; 
    } 
    .col-md-push-12 { 
    left: 100%; 
    } 
    .col-md-push-11 { 
    left: 91.66666666666666%; 
    } 
    .col-md-push-10 { 
    left: 83.33333333333334%; 
    } 
    .col-md-push-9 { 
    left: 75%; 
    } 
    .col-md-push-8 { 
    left: 66.66666666666666%; 
    } 
    .col-md-push-7 { 
    left: 58.333333333333336%; 
    } 
    .col-md-push-6 { 
    left: 50%; 
    } 
    .col-md-push-5 { 
    left: 41.66666666666667%; 
    } 
    .col-md-push-4 { 
    left: 33.33333333333333%; 
    } 
    .col-md-push-3 { 
    left: 25%; 
    } 
    .col-md-push-2 { 
    left: 16.666666666666664%; 
    } 
    .col-md-push-1 { 
    left: 8.333333333333332%; 
    } 
    .col-md-push-0 { 
    left: 0; 
    } 
    .col-md-offset-12 { 
    margin-left: 100%; 
    } 
    .col-md-offset-11 { 
    margin-left: 91.66666666666666%; 
    } 
    .col-md-offset-10 { 
    margin-left: 83.33333333333334%; 
    } 
    .col-md-offset-9 { 
    margin-left: 75%; 
    } 
    .col-md-offset-8 { 
    margin-left: 66.66666666666666%; 
    } 
    .col-md-offset-7 { 
    margin-left: 58.333333333333336%; 
    } 
    .col-md-offset-6 { 
    margin-left: 50%; 
    } 
    .col-md-offset-5 { 
    margin-left: 41.66666666666667%; 
    } 
    .col-md-offset-4 { 
    margin-left: 33.33333333333333%; 
    } 
    .col-md-offset-3 { 
    margin-left: 25%; 
    } 
    .col-md-offset-2 { 
    margin-left: 16.666666666666664%; 
    } 
    .col-md-offset-1 { 
    margin-left: 8.333333333333332%; 
    } 
    .col-md-offset-0 { 
    margin-left: 0; 
    } 
}