我正在尝试使用Javascript打印div内容.我正在使用外部CSS文件进行样式设置.但是添加bootstrap.css后,打印文档不会应用样式.
这是我的代码.
HTML页面
CSS文件
.myclass {
color: greenyellow;
}
最佳答案
是的,它是一个带有引导媒体查询的“问题”.如果你检查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%;
}
}
