Bootstrap 3-打印/PDF [英] Bootstrap 3 - Print / PDF

问题描述

我需要打印我的简历，但是老把戏

I need to print my CV but the old trick

<link href="css/bootstrap.min.css" rel="stylesheet" media="print">

不再起作用，因为Bootstrap 3是移动优先的(从小型设备开始，然后添加媒体查询以获取更大的屏幕)，因此当我打印浏览器时，它将保持移动CSS.

isn't working anymore since Bootstrap 3 is mobile-first (start from small device and then add media queries for bigger screen) so when i print my browser is keeping the mobile css.

正确:

错误:

Correct:

Wrong:

我该如何解决? 我当然不能重新发明引导程序3，而且由于语法已更改，我也不能使用引导程序2.

How can I fix this? I cannot re-invent bootstrap 3 of course and i can't use bootstrap 2 since syntax is changed.

我为履历表做了一个很好的模板，我想也将其保留为pdf/打印格式.

I've done a nice template for Curriculum Vitae and I'd like to keep it also on pdf/print format.

谢谢

推荐答案

大多数情况下，我希望非水平版本的印刷品可以吗?根据您的情况，您可以尝试将网格规则应用于印刷媒体查询.

I'm most case i will expect the print in the non horizontal version maybe? In your case you could try to apply the grid rules on the print media query.

如果您使用默认的小网格(col-sm- *)，则为

In the case you use the small grid (col-sm-*) default, b.e.

    <div class="container">

   <div class="row">
       <div class="col-sm-6">Left</div>
       <div class="col-sm-6">Right</div>
   </div>   
    </div> <!-- /container -->

在您的grid.less中将@media (min-width: @screen-tablet) {替换为@media (min-width: @screen-tablet), print {(添加打印，请参见:

In your grid.less replace @media (min-width: @screen-tablet) { with @media (min-width: @screen-tablet), print { (add print, see: CSS media queries: max-width OR max-height) Recompile bootstrap and your pdf will have left / right just like screen now.

如果没有那么少，您可以尝试为您的案例添加特定的CSS规则，例如:

Without Less you could try to add specific css rules for your case like:

@media print 
{
    body {width:1200px;}
    div[class|=col-]{float:left;}
    .col-sm-6{width:50%}
}

注意print.less包含有关打印介质的特定规则.例如，这用于隐藏导航栏.还有实用程序类: http://getbootstrap.com/css/#响应实用程序有Print类.

Note print.less contains specific rules for print media. This is used to hide the navbar by example. Also the utilities classes: http://getbootstrap.com/css/#responsive-utilities have Print classes.

如果您的浏览器接受@viewport(请参阅: http://docs. webplatform.org/wiki/css/atrules/@viewport )，也许可以这样做: @media print {@viewport {width:1200px;}}在加载CSS之前

If your browser accept the @viewport (see: http://docs.webplatform.org/wiki/css/atrules/@viewport) it will be possible maybe to do: @media print {@viewport {width:1200px;} } before the bootstrap CSS loads

这篇关于Bootstrap 3-打印/PDF的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！