Twitter bootstrap 3 Twitter引导在XS中打印
我使用的是Twitter Bootstrap 3,但当我打印我的网页(通过文件>打印)时,它会在XS(移动视图)中打印页面,我如何强制它使用并在MD(桌面视图)中打印Twitter bootstrap 3 Twitter引导在XS中打印,twitter-bootstrap-3,Twitter Bootstrap 3,我使用的是Twitter Bootstrap 3,但当我打印我的网页(通过文件>打印)时,它会在XS(移动视图)中打印页面,我如何强制它使用并在MD(桌面视图)中打印 它只适用于IE版本9及以下版本。其他浏览器和IE 10+都有这个问题。.col-xs-X在媒体查询之外,这就是它打印的原因。所有列的大小都相同:100/12=8.333333%so。col-lg-6和。col-sm-6和。col-xs-6和。col-md-6都是容器/容器流体的50% 要使打印页面打印列,请添加打印媒体查询: @m
它只适用于IE版本9及以下版本。其他浏览器和IE 10+都有这个问题。
.col-xs-X
在媒体查询之外,这就是它打印的原因。所有列的大小都相同:100/12=8.333333%so。col-lg-6
和。col-sm-6
和。col-xs-6
和。col-md-6
都是容器/容器流体的50%
要使打印页面打印列,请添加打印媒体查询:
@media print {
.container {
max-width: none!important;
width: 100%!important;
padding-left: 0;
padding-right: 0;
}
.row {
margin-left: -1%;
margin-left: -1%;
}
[class*="col-"] {
float: left;
padding-left: 1%;
padding-right: 1%;
}
.col-sm-12,
.col-md-12,
.col-lg-12 {
width: 100%
}
.col-sm-11,
.col-md-11,
.col-lg-11 {
width: 91.66666667%
}
.col-sm-10,
.col-md-10,
.col-lg-10 {
width: 83.33333333%
}
.col-sm-9,
.col-md-9,
.col-lg-9 {
width: 75%
}
.col-sm-8,
.col-md-8,
.col-lg-8 {
width: 66.66666667%
}
.col-sm-7,
.col-md-7,
.col-lg-7 {
width: 58.33333333%
}
.col-sm-6,
.col-md-6,
.col-lg-6 {
width: 50%
}
.col-sm-5,
.col-md-5,
.col-lg-5 {
width: 41.66666667%
}
.col-sm-4,
.col-md-4,
.col-lg-4 {
width: 33.33333333%
}
.col-sm-3,
.col-md-3,
.col-lg-3 {
width: 25%
}
.col-sm-2,
.col-md-2,
.col-lg-2 {
width: 16.66666667%
}
.col-sm-1,
.col-md-1,
.col-lg-1 {
width: 8.33333333%
}
}
请阅读
其要点是浏览器在打印时处理媒体查询的方式不正确/怪异。它们不使用与物理纸张宽度相同的CSS视口宽度
解决方案包括:
- 拥抱额外的小网格,确保你的页面在它下面看起来可以接受
- 自定义
@screen-*
Less变量的值,使您的打印机纸张被视为大于超小
- 添加自定义介质查询以仅更改打印介质的网格大小断点
为了修复它,我在CSS中添加了以下内容
@media print {
body {
margin: 0;
padding: 0 !important;
min-width: 768px;
}
.container {
width: auto;
min-width: 750px;
}
}
这似乎对我很有效。大多数浏览器的打印都很棘手-问题是,根据浏览器、默认纸张大小和方向(纵向或横向)以及悉尼当前的潮流,页面将以72ppi、96ppi或144ppi打印
在引导中,媒体查询建立像素宽度带。。。e、 g.“xs”介于544px-767px之间,因此根据(打印的)页面宽度,您的站点在打印时可能会恢复为“xs”或“sm”宽度变体
上面列出的使用@media print{}
的解决方案在大多数情况下都会起作用,但事实上,该网站需要考虑到打印编码
我举了一个例子,试图解释其中的一些问题和考虑