使用bootstrap固定导航栏打印问题

Question

我用bootstrap固定导航栏制作了网站。它具有固定的导航栏，因此样式表主体的顶部填充为70px。

当我打印页面时，它会在纸张顶部添加额外的空间。我该怎么做才能消除由顶部填充引起的额外空间。

下面是带填充的打印预览

下面是没有填充的打印预览，我希望顶部空间更小。

如果我删除填充，打印是我想要的，但在浏览器中内容得到导航栏后面，我看不到前2-3行。

请给我一些保留固定导航栏的解决方案，并且填充内容也不会包含在打印中。

Answer 1

像这样添加一个新的打印样式表（将其放在主样式表之后）：

<link rel="stylesheet" href="/css/print.css" media="print">

在print.css中为body标签设置新的CSS规则，如下所示：

body {
    margin-top: 0;
}

Answer 2

我知道您可能<或者不希望显示打印的导航栏。我想展示它，所以我在CSS（Bootstrap 3）中添加了这个：

@media print { 
    .navbar {
        display: block;
        border-width:0 !important;
    }
    .navbar-toggle {
        display:none;
    }
}

Answer 3

接受的答案非常有效，但如果您不想添加新的样式表，则可以选择将正文填充包装在媒体标记中。在您的Site.css中：

@media screen {
body {
    padding-top: 50px;
    padding-bottom: 20px;
}

}

这指定仅在查看页面时应用样式，而不是打印。