使用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;
    }
}