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

前端之家收集整理的这篇文章主要介绍了javascript – 使用不支持bootstrap的样式打印HTML div前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

我正在尝试使用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中添加更多内容

原文链接:https://www.f2er.com/html/426533.html

猜你在找的HTML相关文章