Bootstrap固定导航栏的打印问题

Question

我用Bootstrap制作了一个带有固定顶部导航条的网站。它有固定的导航条，因此在样式表中，正文部分有70像素的上边距。

当我打印页面时，它会在纸张顶部添加额外的空白。我该如何去除由此引起的额外空间？

以下是包含上边距的打印预览： 以下是不包含上边距的打印预览，这就是我想要的，但是距离顶部的空间要更小。 如果我去掉上边距，打印效果就如我所愿，但在浏览器中，内容会被导航栏遮挡，看不到前2-3行。

请给我一些解决方案，以保留固定的导航栏，同时使上边距在打印时不被包括。

- Sumit P Makwana

---

为什么不为打印创建一个仅使用CSS的样式表呢？ - Alberto

我已经为打印创建了样式表，它有效了，感谢解决方案。我不知道我们还可以为打印单独创建样式表。 - Sumit P Makwana

太好了，你解决了！既然这是正确的解决方案，我可以把评论移到答案里吗？哎呀，我刚看到有人已经把它作为解决方案了。所以我不需要再添加了。 - Alberto

Answer 1

我知道你可能想或不想在打印时显示导航栏。我希望显示它，所以我在我的CSS（Bootstrap 3）中添加了以下内容：

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

- blalond

---

这对我有效，而不是被接受的答案。 - lisandro

Answer 2

请添加一个新的打印样式表，如下所示（将其放在主样式表之后）：

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

在 print.css 文件中设置新的 CSS 规则，针对 body 标签进行如下设置：

body {
    margin-top: 0;
}

- Billy Moat

---

它起作用了，感谢解决方案。我不知道我们也可以仅为打印创建样式表。 - Sumit P Makwana

Answer 3

接受的答案完美地解决了问题，但如果您不想添加新的样式表，另一种选择是在媒体标签中包装body padding。在您的Site.css中：

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

这表示该样式仅适用于页面查看，而不适用于打印。

- RobJohnson