如何使用CSS和Bootstrap樣式打印我的頁面

Question

我正在嘗試使用CSS和boostrap樣式打印網站。 我正在使用ctrl + p或window.print()函數進行打印； 我嘗試在我的打印函數中添加CSS引用， media="print"和其他內容，但是我無法使用CSS樣式打印頁面，而boostrap樣式僅顯示div，控件和按鈕邊框而沒有顏色。

我的CSS的例子

    body{
    background-color:gainsboro;
    }

    .wrapper {    
    margin-top: 80px;
    margin-bottom: 20px;
    }

    .form-signin {
    max-width: 420px;
    padding: 30px 38px 66px;
    margin: 0 auto;
    background-color: #eee;
    border: 3px dotted rgba(0,0,0,0.1);  
    }

    .form-signin-heading {
    text-align:center;
    margin-bottom: 30px;
    }

   .form-control {
    position: relative;
    font-size: 16px;
    height: auto;
    padding: 10px;
    }

Answer 1

不幸的是，上周我一直在進行此工作，但是我並沒有完全致力於使Bootstrap樣式可打印。 在您的CSS中添加

@media print {
  p.class-name {
  color: red !important;
  -webkit-print-color-adjust: exact; 

  }
}

在@media print內部，您可以設置元素對打印的反應

例如

#breadcrumbs {
  display: none;
}

會阻止我帶有ID面包屑的元素顯示在打印頁面上。