javascript – 使用不支持bootstrap的样式打印HTML div

发布时间：2020-12-14 23:10:07 所属栏目：资源来源：网络整理

导读：我正在尝试使用Javascript打印div内容.我正在使用外部CSS文件进行样式设置.但是添加bootstrap.css后,打印文档不会应用样式. 这是我的代码. HTML页面 CSS文件 .myclass { color: greenyellow;} 这是媒体查询的问题吗？在添加bootstrap之前,它适用于其他样式.

我正在尝试使用Javascript打印div内容.我正在使用外部CSS文件进行样式设置.但是添加bootstrap.css后,打印文档不会应用样式.

这是我的代码.

HTML页面


CSS文件

.myclass {
    color: greenyellow;
}

这是媒体查询的问题吗？在添加bootstrap之前,它适用于其他样式.


最佳答案
是的,它是一个带有引导媒体查询的“问题”.如果你检查bootstrap css,你会看到col-sm-xx在768px之后变大,在992px之后col-md-xx,A4打印的视口是670px？ (Safe Width in Pixel for Printing Web Pages?).因此,您必须使用col-xs-xx进行打印或添加媒体查询以使用col-sm-xx

@media print {
      .col-sm-1,.col-sm-2,.col-sm-3,.col-sm-4,.col-sm-5,.col-sm-6,.col-sm-7,.col-sm-8,.col-sm-9,.col-sm-10,.col-sm-11,.col-sm-12 {
           float: left;               
      }

      .col-sm-12 {
           width: 100%;
      }

      .col-sm-11 {
           width: 91.66666666666666%;
      }

      .col-sm-10 {
           width: 83.33333333333334%;
      }

      .col-sm-9 {
            width: 75%;
      }

      .col-sm-8 {
            width: 66.66666666666666%;
      }

       .col-sm-7 {
            width: 58.333333333333336%;
       }

       .col-sm-6 {
            width: 50%;
       }

       .col-sm-5 {
            width: 41.66666666666667%;
       }

       .col-sm-4 {
            width: 33.33333333333333%;
       }

       .col-sm-3 {
            width: 25%;
       }

       .col-sm-2 {
              width: 16.666666666666664%;
       }

       .col-sm-1 {
              width: 8.333333333333332%;
        }            
}

可能需要在@media print中添加更多内容
                        （编辑：李大同）
【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!