爲什麼引導CSS是不可見的，而通過的jQuery/JavaScript的

Question

我創造，我已經使用引導程序，它在打印預覽不包括我在使用功能類似

window.print(); 

頁印刷

我給了一張照片來幫助你理解我的問題。我試圖導入同一引導css文件，並給它media爲print

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" media="print"> 

但是，這並沒有解決問題。是否有任何有效的解決方案來打印它的原始文件看起來。

Answer 1

Bootstrap擁有自己的@media打印部分。

引導3.3.7（source）：

@media print { 
    *, 
    *:before, 
    *:after { 
    color: #000 !important; 
    text-shadow: none !important; 
    background: transparent !important; 
    -webkit-box-shadow: none !important; 
      box-shadow: none !important; 
    } 
    a, 
    a:visited { 
    text-decoration: underline; 
    } 
    a[href]:after { 
    content: " (" attr(href) ")"; 
    } 
    abbr[title]:after { 
    content: " (" attr(title) ")"; 
    } 
    a[href^="#"]:after, 
    a[href^="javascript:"]:after { 
    content: ""; 
    } 
    pre, 
    blockquote { 
    border: 1px solid #999; 

    page-break-inside: avoid; 
    } 
    thead { 
    display: table-header-group; 
    } 
    tr, 
    img { 
    page-break-inside: avoid; 
    } 
    img { 
    max-width: 100% !important; 
    } 
    p, 
    h2, 
    h3 { 
    orphans: 3; 
    widows: 3; 
    } 
    h2, 
    h3 { 
    page-break-after: avoid; 
    } 
    .navbar { 
    display: none; 
    } 
    .btn > .caret, 
    .dropup > .btn > .caret { 
    border-top-color: #000 !important; 
    } 
    .label { 
    border: 1px solid #000; 
    } 
    .table { 
    border-collapse: collapse !important; 
    } 
    .table td, 
    .table th { 
    background-color: #fff !important; 
    } 
    .table-bordered th, 
    .table-bordered td { 
    border: 1px solid #ddd !important; 
    } 
} 

...

@media print { 
    .visible-print { 
    display: block !important; 
    } 
    table.visible-print { 
    display: table !important; 
    } 
    tr.visible-print { 
    display: table-row !important; 
    } 
    th.visible-print, 
    td.visible-print { 
    display: table-cell !important; 
    } 
} 

...

@media print { 
    .visible-print-block { 
    display: block !important; 
    } 
} 
.visible-print-inline { 
    display: none !important; 
} 
@media print { 
    .visible-print-inline { 
    display: inline !important; 
    } 
} 
.visible-print-inline-block { 
    display: none !important; 
} 
@media print { 
    .visible-print-inline-block { 
    display: inline-block !important; 
    } 
} 
@media print { 
    .hidden-print { 
    display: none !important; 
    } 
} 

您可以

1. 剪切這個從，如果你想
2. 寫自己的CSS文件，將包含自己的原則，將覆蓋引導規則