Bootstrap 3 – 打印/ PDF

发布时间：2020-12-18 00:23:04 所属栏目：安全来源：网络整理

导读：我需要打印我的简历,但旧技巧 link href="css/bootstrap.min.css" rel="stylesheet" media="print" 因为Bootstrap 3是移动优先(从小设备开始,然后为更大的屏幕添加媒体查询),因此不再工作了所以当我打印我的浏览器时保持移动css. 正确： http://f.cl.ly/item

我需要打印我的简历,但旧技巧

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

因为Bootstrap 3是移动优先(从小设备开始,然后为更大的屏幕添加媒体查询),因此不再工作了所以当我打印我的浏览器时保持移动css.

正确：
http://f.cl.ly/items/3s320O0w04021s3b3j2j/print1.png
错误：
http://f.cl.ly/items/3t300Z3c2e1q3G1m0r27/print2.png

我怎样才能解决这个问题？
我当然无法重新发明bootstrap 3,因为语法被更改,所以我无法使用bootstrap 2.

我已经为简历做了一个很好的模板,我想保留它的pdf /打印格式.

谢谢

解决方法

我大多数情况下我会期望非水平版的打印可能吗？在您的情况下,您可以尝试在打印媒体查询上应用网格规则.

在使用小网格(col-sm- *)默认值的情况下,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),打印{(添加打印,参见：CSS media queries: max-width OR max-height)
重新编译bootstrap,你的pdf就像屏幕一样左/右.

如果没有Less,您可以尝试为您的案例添加特定的css规则,例如：

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

注意print.less包含打印介质的特定规则.这用于通过示例隐藏导航栏.实用程序类：http://getbootstrap.com/css/#responsive-utilities还有Print类.

如果您的浏览器接受@viewport(参见：http://docs.webplatform.org/wiki/css/atrules/@viewport),则可能会执行以下操作：在引导CSS加载之前@media print {@viewport {width：1200px;}}

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!