Bootsrap＃sidebar-wrapper在打印時在某些瀏覽器中佔用空間

從twitter引導程序應用程序打印時遇到問題。 https://hod-nav.herokuapp.com/members/H0252# 當試圖使用打印按鈕，或只是文件>打印，＃側欄包裝仍然佔用打印頁面上的不動產。Bootsrap＃sidebar-wrapper在打印時在某些瀏覽器中佔用空間

這隻發生在PC Safari，Mac Safari和Mac Firefox上。

我正在使用BS 3.3.6。

我做了很多事情。

•我的CSS設置爲媒體：「所有」 •我打得四處BS打印樣式表是這樣的...

@media print { 
    #sidebar-wrapper { 
    display: none !important; 
    visibility: hidden !important; 
    }

•我已經添加了神祕的類=「隱藏-print「到相關元素。

•我可以隱藏不需要使用上述打印樣式表打印的東西。

•我還添加了級聯中的其他選擇器，以非常明確地定位元素。從上面列出的問題瀏覽器想要在左側保留250px +的空白處，或者從容器的主容器div中放置主要的容器div，或者單擊打印按鈕，或者只是基本的CTRL/CMD + P，在其中映射以在其他瀏覽器中以全寬度打印。

只是想知道是否有人在這些瀏覽器或其他人遇到過這個問題。

我很高興證明有更多的信息。

在此先感謝您的閱讀和思考。

真誠，迪克

只是看着，所有看起來好像沒什麼問題，在打印預覽沒有側邊欄。編輯，我應該閱讀整個問題，這是在沒有提到的瀏覽器。 – Dale

您的'＃wrapper'（！，不是側邊欄）在'min-width：768px'媒體查詢中有一個'padding-left：250px'，就我在Firefox中的打印預覽中的巡視員中可以看到的儘管在Windows中）似乎不會被專門用於打印的任何地方覆蓋......？ OMG！ – CBroe

這不是#sidebar-wrapper佔用空間佈局，它的主要元素的左填充，你需要禁用打印：

@media print { 
    #wrapper { 
    padding-left: 0; 
    } 
}

這需要放置在樣式的末尾，以覆蓋@media (min-width: 768px)中的#wrapper選擇器。或者，您可以使用div#wrapper而不是#wrapper，它將應用，而不管它在CSS文件中的位置。

而且，順便說一下，這些id都與Twitter Bootstrap沒有任何關係。

2017-10-19 19:30:29

OMG！你們都這麼對。這是我完全錯過的東西，必須回去解決。它現在在上面引用的瀏覽器中正常工作！只有1個問題，它只是讓我標記其中一個答案是正確的。 @CBroe，我做了upvote。感謝大家！ –

貌似有填充你的包裝元素 - >

#wrapper { padding-left:250px;}

2017-10-19 20:39:44

回答