大多數內容和圖像未加載Bootstrap打印預覽

Question

我開發了使用Bootstrap框架的網站。我想打印我的頁面，但每當我在打印預覽網站的大部分部分，如圖像和內容加載不正確。

因爲我使用引導程序，所以我不得不添加任何其他支持插件。

請幫忙解決這個問題。在此先感謝

Answer 1

這是可能，因爲大部分的@media查詢是

@media screen and ... { 
    ... 
} 
/* or */ 
@media only screen and ... { 
    ... 
} 

你需要讓你想在print應用的那些應用有太多，方法是

• 完全刪除那些媒體查詢的screen或only screen條件
• 替換screen用all
• 單獨書寫print規則（@media print {...}）。

Twitter Bootstrap專爲屏幕而設計，不適用於打印，其大部分（響應）CSS規則僅適用於屏幕。但是，它提供了一系列的課程在基本層面來處理打印：

Class      Browser Print 
------------------------------------------------- 
.visible-print-block   Hidden  Visible (as block) 
.visible-print-inline  Hidden  Visible (as inline) 
.visible-print-inline-block Hidden  Visible (as inline-block) 
.hidden-print    Visible  Hidden 

使用上面的類，你可以安全地應用於.hidden-print您當前頁面的容器，並與.visible-print-{...}添加另一個容器保持印刷版本。在大多數情況下，保持它們分離是一個好主意，因爲它們很容易以這種方式進行管理。

你也不需要過多的關注SEO機器人索引，大部分主要人員都知道如何閱讀打印規則。