Printing 使用bootstrap 3打印页面
我已经在stackoverflow上查阅了很多答案,这些答案涵盖了我的疑惑,但没有找到任何适合我的答案 据我所知,A4的打印页面约为550像素,因此bootstrap将使用移动设备通常使用的样式和布局 当我对我的网页使用Ctrl+p时,可打印的网页看起来就像我的网页的移动版。但是我如何使它看起来像桌面版呢?(媒体>1024像素)有办法做到这一点吗 我知道我可以专门为打印更改css。但是如何用Bootstrap3网格系统解决这个问题呢?我的div上的宽度是基于我为col xs添加的内容得到的,但是我希望print使用col md的布局(宽度) 编辑:经过几个小时的努力,我意识到它可能比我最初预期的更复杂。仅仅改变宽度并不能解决我的问题。我的许多div都具有Printing 使用bootstrap 3打印页面,printing,twitter-bootstrap-3,dpi,Printing,Twitter Bootstrap 3,Dpi,我已经在stackoverflow上查阅了很多答案,这些答案涵盖了我的疑惑,但没有找到任何适合我的答案 据我所知,A4的打印页面约为550像素,因此bootstrap将使用移动设备通常使用的样式和布局 当我对我的网页使用Ctrl+p时,可打印的网页看起来就像我的网页的移动版。但是我如何使它看起来像桌面版呢?(媒体>1024像素)有办法做到这一点吗 我知道我可以专门为打印更改css。但是如何用Bootstrap3网格系统解决这个问题呢?我的div上的宽度是基于我为col xs添加的内容得到的,但是
<div class="md-right sm-right xs-down col-md-1 col-sm-2 box"></div>
或
对于小型设备,在XS中页面看起来不错,但在XS中打印会使许多元素看起来非常庞大。因此,问题依然存在。有没有办法使打印页面看起来与中型或大型设备的布局相同?或者我必须在不使用引导网格系统的情况下制作打印css,并在pt中为所有元素添加静态宽度来完成这项工作吗
提前感谢提供JSBin会很有帮助。无论如何,由于我在JSBin中有这个带有col-sm-(星号)的布局,您只需将打印媒体查询之间的所有-sm-to-xs-in更改即可。所有百分比在每个断点处都是相同的,因此将sm更改为xs将打印该百分比,并忽略其他列-(星号)类。啊,我现在读了这篇文章,你需要在这篇文章中将所有的列sm改为列md,然后使用!重要的是,应该这样做。xs列在媒体查询之外,所以这就是为什么会发生这种情况
最后,我使用自己的print.css文件解决了这个问题,而没有包括所有响应引导的内容。仅在show and hide中包含一些必要的引导功能。对于那些使用引导混合来创建此类列的用户(sass版本): 仅仅像Christina建议的那样覆盖columns类的样式是不够的。我找到的唯一简单的解决方案是将_variables.scs中的$screen sm更改为595px并重新编译bootstrap.css 因此,请在_variables.scss中找到以下代码:
$screen-sm: 768px !default;
$screen-sm-min: $screen-sm !default;
并将其更改为:
// decrease min-width to fix print layout issue
$screen-sm: 595px !default;
$screen-sm-min: $screen-sm !default;
然后在您的_print.scs中
@page {
size: A4;
margin: 0;
}
@media print {
html, body {
width: 768px;
}
body {
margin: 0 auto;
}
// .. your custom styles for print layout
}
我也有类似的问题。我最终用X列替换了所有的md列-*列,效果非常好。这是exmaple代码
<div class="container make-border" id="obaidrehman07">
<div class="row make-border">
<div class="col-md-9 text-center main-title col-md-offset-1">
<h4 class="heading-white"><strong>CONTRACT ACTION REPORT</strong></h4>
</div>
<div class="col-md-0 pull-right"> <img class="img-responsive" src="<?=$base_url;?>assets/office_home/target/dd46a999e4f329f98e5b8df60e21e9ab.png" alt="" style="max-width: 110px;" /> </div>
</div>
</div>
合同行动报告
资产/office_home/target/dd46a999e4f329f98e5b8df60e21e9ab.png“alt=”“style=”最大宽度:110px;" />
转化为
<div class="container make-border" id="obaidrehman07">
<div class="row make-border">
<div class="col-xs-9 text-center main-title col-xs-offset-1">
<h4 class="heading-white"><strong>CONTRACT ACTION REPORT</strong></h4>
</div>
<div class="col-xs-0 pull-right"> <img class="img-responsive" src="<?=$base_url;?>assets/office_home/target/dd46a999e4f329f98e5b8df60e21e9ab.png" alt="" style="max-width: 110px;" /> </div>
</div>
</div>
合同行动报告
资产/office_home/target/dd46a999e4f329f98e5b8df60e21e9ab.png“alt=”“style=“最大宽度:110px;”/>
实际上,您需要添加(到user.css)的内容如下:
当你在使用它时,考虑使用所有这些设置来引导Bootstrap 3 < /P>
@media print {
@page {
size: A4;
margin: 0mm;
}
html, body {
width: 1024px;
}
body {
margin: 0 auto;
line-height: 1em;
word-spacing:1px;
letter-spacing:0.2px;
font: 14px "Times New Roman", Times, serif;
background:white;
color:black;
width: 100%;
float: none;
}
/* avoid page-breaks inside a listingContainer*/
.listingContainer{
page-break-inside: avoid;
}
h1 {
font: 28px "Times New Roman", Times, serif;
}
h2 {
font: 24px "Times New Roman", Times, serif;
}
h3 {
font: 20px "Times New Roman", Times, serif;
}
/* Improve colour contrast of links */
a:link, a:visited {
color: #781351
}
/* URL */
a:link, a:visited {
background: transparent;
color:#333;
text-decoration:none;
}
a[href]:after {
content: "" !important;
}
a[href^="http://"] {
color:#000;
}
#header {
height:75px;
font-size: 24pt;
color:black
}
}
在print.css文件中添加此css样式
@page {
size: A4;
margin: 40px;
}
@media print {
html,
body {
width: 210mm;
height: 297mm;
}
@-moz-document url-prefix() {}
.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,
.col-md-1,
.col-md-2,
.col-md-3,
.col-md-4,
.col-md-5,
.col-md-6,
.col-md-7,
.col-md-8,
.col-md-9,
.col-md-10,
.col-md-11,
.col-smdm-12 {
float: left;
}
.col-sm-12,
.col-md-12 {
width: 100%;
}
.col-sm-11,
.col-md-11 {
width: 91.66666667%;
}
.col-sm-10,
.col-md-10 {
width: 83.33333333%;
}
.col-sm-9,
.col-md-9 {
width: 75%;
}
.col-sm-8,
.col-md-8 {
width: 66.66666667%;
}
.col-sm-7,
.col-md-7 {
width: 58.33333333%;
}
.col-sm-6,
.col-md-6 {
width: 50%;
}
.col-sm-5,
.col-md-5 {
width: 41.66666667%;
}
.col-sm-4,
.col-md-4 {
width: 33.33333333%;
}
.col-sm-3,
.col-md-3 {
width: 25%;
}
.col-sm-2,
.col-md-2 {
width: 16.66666667%;
}
.col-sm-1,
.col-md-1 {
width: 8.33333333%;
}
.col-sm-pull-12 {
right: 100%;
}
.col-sm-pull-11 {
right: 91.66666667%;
}
.col-sm-pull-10 {
right: 83.33333333%;
}
.col-sm-pull-9 {
right: 75%;
}
.col-sm-pull-8 {
right: 66.66666667%;
}
.col-sm-pull-7 {
right: 58.33333333%;
}
.col-sm-pull-6 {
right: 50%;
}
.col-sm-pull-5 {
right: 41.66666667%;
}
.col-sm-pull-4 {
right: 33.33333333%;
}
.col-sm-pull-3 {
right: 25%;
}
.col-sm-pull-2 {
right: 16.66666667%;
}
.col-sm-pull-1 {
right: 8.33333333%;
}
.col-sm-pull-0 {
right: auto;
}
.col-sm-push-12 {
left: 100%;
}
.col-sm-push-11 {
left: 91.66666667%;
}
.col-sm-push-10 {
left: 83.33333333%;
}
.col-sm-push-9 {
left: 75%;
}
.col-sm-push-8 {
left: 66.66666667%;
}
.col-sm-push-7 {
left: 58.33333333%;
}
.col-sm-push-6 {
left: 50%;
}
.col-sm-push-5 {
left: 41.66666667%;
}
.col-sm-push-4 {
left: 33.33333333%;
}
.col-sm-push-3 {
left: 25%;
}
.col-sm-push-2 {
left: 16.66666667%;
}
.col-sm-push-1 {
left: 8.33333333%;
}
.col-sm-push-0 {
left: auto;
}
.col-sm-offset-12 {
margin-left: 100%;
}
.col-sm-offset-11 {
margin-left: 91.66666667%;
}
.col-sm-offset-10 {
margin-left: 83.33333333%;
}
.col-sm-offset-9 {
margin-left: 75%;
}
.col-sm-offset-8 {
margin-left: 66.66666667%;
}
.col-sm-offset-7 {
margin-left: 58.33333333%;
}
.col-sm-offset-6 {
margin-left: 50%;
}
.col-sm-offset-5 {
margin-left: 41.66666667%;
}
.col-sm-offset-4 {
margin-left: 33.33333333%;
}
.col-sm-offset-3 {
margin-left: 25%;
}
.col-sm-offset-2 {
margin-left: 16.66666667%;
}
.col-sm-offset-1 {
margin-left: 8.33333333%;
}
.col-sm-offset-0 {
margin-left: 0%;
}
.visible-xs {
display: none !important;
}
.hidden-xs {
display: block !important;
}
table.hidden-xs {
display: table;
}
tr.hidden-xs {
display: table-row !important;
}
th.hidden-xs,
td.hidden-xs {
display: table-cell !important;
}
.hidden-xs.hidden-print {
display: none !important;
}
.hidden-sm {
display: none !important;
}
.visible-sm {
display: block !important;
}
table.visible-sm {
display: table;
}
tr.visible-sm {
display: table-row !important;
}
th.visible-sm,
td.visible-sm {
display: table-cell !important;
}
}
当然可以!为什么我没有想到:)我会尝试并合作。我将在测试后更新该票证。谢谢如果您使用了推拉功能,您还需要在打印中添加推拉功能。请就这个答案投票。谢谢是的,为了让打印css看起来更好,它仍然需要一些技巧,但是主要的问题是宽度。当我看到答案时,这是显而易见的,但有时你只是被眼前的事情卡住了。还不能投票,但至少我把它作为一个答案。谢谢你的帮助。我有时会在最简单的事情上放脑屁。根据一天中的时间和咖啡,我会使事情变得简单复杂!要同时打印单个页面上的所有选项卡,请执行此操作,并在Asp.Net MVC中将@替换为@,如下所述。我非常感谢你的回答。使用此CSS,我的6页打印输出减少到2页!
<div class="container make-border" id="obaidrehman07">
<div class="row make-border">
<div class="col-xs-9 text-center main-title col-xs-offset-1">
<h4 class="heading-white"><strong>CONTRACT ACTION REPORT</strong></h4>
</div>
<div class="col-xs-0 pull-right"> <img class="img-responsive" src="<?=$base_url;?>assets/office_home/target/dd46a999e4f329f98e5b8df60e21e9ab.png" alt="" style="max-width: 110px;" /> </div>
</div>
</div>
@media print {
@page {
size: A4;
margin: 0mm;
}
html, body {
width: 1024px;
}
body {
margin: 0 auto;
}
}
@media print {
@page {
size: A4;
margin: 0mm;
}
html, body {
width: 1024px;
}
body {
margin: 0 auto;
line-height: 1em;
word-spacing:1px;
letter-spacing:0.2px;
font: 14px "Times New Roman", Times, serif;
background:white;
color:black;
width: 100%;
float: none;
}
/* avoid page-breaks inside a listingContainer*/
.listingContainer{
page-break-inside: avoid;
}
h1 {
font: 28px "Times New Roman", Times, serif;
}
h2 {
font: 24px "Times New Roman", Times, serif;
}
h3 {
font: 20px "Times New Roman", Times, serif;
}
/* Improve colour contrast of links */
a:link, a:visited {
color: #781351
}
/* URL */
a:link, a:visited {
background: transparent;
color:#333;
text-decoration:none;
}
a[href]:after {
content: "" !important;
}
a[href^="http://"] {
color:#000;
}
#header {
height:75px;
font-size: 24pt;
color:black
}
}
@page {
size: A4;
margin: 40px;
}
@media print {
html,
body {
width: 210mm;
height: 297mm;
}
@-moz-document url-prefix() {}
.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,
.col-md-1,
.col-md-2,
.col-md-3,
.col-md-4,
.col-md-5,
.col-md-6,
.col-md-7,
.col-md-8,
.col-md-9,
.col-md-10,
.col-md-11,
.col-smdm-12 {
float: left;
}
.col-sm-12,
.col-md-12 {
width: 100%;
}
.col-sm-11,
.col-md-11 {
width: 91.66666667%;
}
.col-sm-10,
.col-md-10 {
width: 83.33333333%;
}
.col-sm-9,
.col-md-9 {
width: 75%;
}
.col-sm-8,
.col-md-8 {
width: 66.66666667%;
}
.col-sm-7,
.col-md-7 {
width: 58.33333333%;
}
.col-sm-6,
.col-md-6 {
width: 50%;
}
.col-sm-5,
.col-md-5 {
width: 41.66666667%;
}
.col-sm-4,
.col-md-4 {
width: 33.33333333%;
}
.col-sm-3,
.col-md-3 {
width: 25%;
}
.col-sm-2,
.col-md-2 {
width: 16.66666667%;
}
.col-sm-1,
.col-md-1 {
width: 8.33333333%;
}
.col-sm-pull-12 {
right: 100%;
}
.col-sm-pull-11 {
right: 91.66666667%;
}
.col-sm-pull-10 {
right: 83.33333333%;
}
.col-sm-pull-9 {
right: 75%;
}
.col-sm-pull-8 {
right: 66.66666667%;
}
.col-sm-pull-7 {
right: 58.33333333%;
}
.col-sm-pull-6 {
right: 50%;
}
.col-sm-pull-5 {
right: 41.66666667%;
}
.col-sm-pull-4 {
right: 33.33333333%;
}
.col-sm-pull-3 {
right: 25%;
}
.col-sm-pull-2 {
right: 16.66666667%;
}
.col-sm-pull-1 {
right: 8.33333333%;
}
.col-sm-pull-0 {
right: auto;
}
.col-sm-push-12 {
left: 100%;
}
.col-sm-push-11 {
left: 91.66666667%;
}
.col-sm-push-10 {
left: 83.33333333%;
}
.col-sm-push-9 {
left: 75%;
}
.col-sm-push-8 {
left: 66.66666667%;
}
.col-sm-push-7 {
left: 58.33333333%;
}
.col-sm-push-6 {
left: 50%;
}
.col-sm-push-5 {
left: 41.66666667%;
}
.col-sm-push-4 {
left: 33.33333333%;
}
.col-sm-push-3 {
left: 25%;
}
.col-sm-push-2 {
left: 16.66666667%;
}
.col-sm-push-1 {
left: 8.33333333%;
}
.col-sm-push-0 {
left: auto;
}
.col-sm-offset-12 {
margin-left: 100%;
}
.col-sm-offset-11 {
margin-left: 91.66666667%;
}
.col-sm-offset-10 {
margin-left: 83.33333333%;
}
.col-sm-offset-9 {
margin-left: 75%;
}
.col-sm-offset-8 {
margin-left: 66.66666667%;
}
.col-sm-offset-7 {
margin-left: 58.33333333%;
}
.col-sm-offset-6 {
margin-left: 50%;
}
.col-sm-offset-5 {
margin-left: 41.66666667%;
}
.col-sm-offset-4 {
margin-left: 33.33333333%;
}
.col-sm-offset-3 {
margin-left: 25%;
}
.col-sm-offset-2 {
margin-left: 16.66666667%;
}
.col-sm-offset-1 {
margin-left: 8.33333333%;
}
.col-sm-offset-0 {
margin-left: 0%;
}
.visible-xs {
display: none !important;
}
.hidden-xs {
display: block !important;
}
table.hidden-xs {
display: table;
}
tr.hidden-xs {
display: table-row !important;
}
th.hidden-xs,
td.hidden-xs {
display: table-cell !important;
}
.hidden-xs.hidden-print {
display: none !important;
}
.hidden-sm {
display: none !important;
}
.visible-sm {
display: block !important;
}
table.visible-sm {
display: table;
}
tr.visible-sm {
display: table-row !important;
}
th.visible-sm,
td.visible-sm {
display: table-cell !important;
}
}