css - Bootstrap #sidebar-wrapper 在打印时在某些浏览器中占用空间

Question

我在从 Twitter Bootstrap 应用程序打印时遇到问题。 https://hod-nav.herokuapp.com/members/H0252# 当尝试使用打印按钮或仅使用文件 > 打印时，#sidebar-wrapper 仍会占用打印页面上的空间。

这仅发生在 PC Safari、Mac Safari 和 Mac Firefox 中。

我正在使用 BS 3.3.6。

我做了很多事情。

• 我的 css 设置为 media: 'all' • 我曾像这样玩过 BS 打印样式表...

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

• 我已将神秘的 class="hidden-print"添加到相关元素。

• 我可以像上面那样使用打印样式表隐藏不需要打印的内容。

• 我还从级联中添加了额外的选择器，以非常具体地定位元素。

正如您通过点击打印按钮或简单的 CTRL/CMD + P 看到的那样，上面列出的问题浏览器希望在左侧保留 250px 以上的空白区域，而不是允许主容器 div 带有 map 像在其他浏览器中一样以全宽打印。

只是想知道是否有其他人在这些浏览器或其他浏览器中遇到过这个问题。

我很高兴证明更多信息。

提前感谢您的阅读和思考。

真诚的， 迪克

Answer 1

占用布局空间的不是#sidebar-wrapper，而是主要元素的左侧填充，您需要在打印时禁用它:

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

这需要放在样式的末尾，以覆盖 @media (min-width: 768px) 中的 #wrapper 选择器。或者，您可以使用 div#wrapper 而不是 #wrapper，无论它在 CSS 文件中的位置如何，它都会应用。

顺便说一句，这些 id 都与 Twitter Bootstrap 没有任何关系。