属性宽度：100% 不适合可打印区域，包含引导程序时位置固定

问题描述 投票：0回答：1

我正在尝试使用 Bootstrap 样式打印 HTML 页面，但是当我包含 Bootstrap 的链接时，带有 

position: fixed
和 
width: 100%
的 div 无法适合可打印区域。当我删除 Bootstrap 的链接时，div 适合可打印区域。

当我删除 Bootstrap 链接时

<!DOCTYPE>
<html>
    <head>

        <style>
            @media print {
                html, body {
                    margin:0; 
                    padding: 0;
                }
                @page {
                    margin:0; 
                    padding: 0;
                    size:  210mm;
                }
                .content-div {
                    position: fixed;
                    top: 0;
                    left: 0;
                    height: 100%;
                    width: 100%;
                    background-color: rgb(10, 3, 3);
                    z-index: 999;
                }                                
            }            
            
            
        </style>

    </head>
    
    <body style="width: 210mm;">
        <div class="content-div"></div>
       
        <script>
            print()
        </script>
    </body>
</html>

结果

头部有 Bootstrap 链接，这是结果

<!DOCTYPE>
<html>
    <head>
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

        <style>
            @media print {
                html, body {
                    margin:0; 
                    padding: 0;
                }
                @page {
                    margin:0; 
                    padding: 0;
                    size:  210mm;
                }
                .content-div {
                    position: fixed;
                    top: 0;
                    left: 0;
                    height: 100%;
                    width: 100%;
                    background-color: rgb(10, 3, 3);
                    z-index: 999;
                }                                
            }            
            
            
        </style>

    </head>
    
    <body style="width: 210mm;">
        <div class="content-div"></div>
       
        <script>
            print()
        </script>
    </body>
</html>

当包含 Bootstrap 时，为什么带 

width: 100%
的黑色 div 不适合打印区域？

css bootstrap-4
1个回答
0
投票

查看 Bootstrap.min.css 文件后，我找到了需要覆盖的@media print。

<style>
    @media print {
        body {
            min-width: 210mm !important
        }
    }
</style>

通过在媒体打印下的正文中添加 

min-width: 210mm !important
，它可以工作

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.