使用引导程序 3 打印页面

Posted 2023-03-06

【中文标题】使用引导程序 3 打印页面

【英文标题】：Printing page with bootstrap 3

【发布时间】：2013-12-13 04:07:00

【问题描述】：

我一直在 *** 上查看很多答案，这些答案半涵盖了我想知道的内容，但没有找到任何适合我的答案。

我了解 A4 的打印页面约为 550 像素，因此 bootstrap 将使用通常用于移动设备的样式和布局。

当我对我的网页使用 Ctrl+P 时，可打印的页面看起来就像我的页面的移动版本。但是如何让它看起来像桌面版本？ （媒体 > 1024 像素）有没有办法做到这一点？

我知道我可以更改专门用于打印的 css。但是如何用 bootstrap 3 网格系统解决这个问题呢？我的 div 的宽度基于我为 col-xs 添加的内容，但我希望打印使用 col-md 的布局（宽度）

编辑：在我为此苦苦挣扎了几个小时后，我意识到它可能比我最初预期的要复杂。仅仅改变宽度并不能解决我的问题。我的许多 div 都有

的语法

<div class="md-right sm-right xs-down col-md-1 col-sm-2 box"></div>

或

<div class="col-md-4 col-sm-6 col-xs-12"></div>

页面在 XS 中对于小型设备看起来不错，但在 XS 中打印会使许多元素看起来很大。所以问题仍然存在。有没有办法使打印页面看起来与中型或大型设备的布局相同？或者我是否必须在不使用引导网格系统的情况下制作打印 css 并在 pt 中为所有元素添加静态宽度才能完成此操作？

提前致谢

【参考方案1】：

提供一个 JSBin 会很有帮助。无论如何，由于我在 JSBin 中使用 col-sm-（星号）进行了此布局，因此您只需将打印媒体查询之间的所有 -sm- 更改为 -xs- 即可。所有百分比在每个断点处都相同，因此将 sm 更改为 xs 将打印该百分比并忽略其他 col-（星号）类。啊，我现在读了这篇文章，你需要将所有的 col-sm 更改为 col-md，然后使用！important，应该可以做到。 xs col 在媒体查询之外，所以这就是发生这种情况的原因。

http://jsbin.com/AzICaQes/5

@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%;
 

  

【讨论】：

当然可以！为什么我没有想到 :) 我会尝试并合作。我会在测试后更新票证。谢谢

如果您使用它们，您还需要将推拉添加到打印中。请对此答案投票。谢谢！

是的，它仍然需要对打印 css 进行一些调整以使其看起来不错，但主要问题是宽度问题。当我看到答案时，这很明显，但有时您只是卡在眼前的事情上。还不能投票，但至少我将其标记为答案。感谢您的帮助。

是的。有时我会在最简单的事情上放屁。我会根据一天中的时间和咖啡使简单复杂！

【参考方案2】：

实际上，您需要添加的（到 user.css）是这样的：

@media print 

  @page                 
    size: A4;
    margin: 0mm;
  

  html, body 
    width: 1024px;
  

  body 
    margin: 0 auto;
  

当您使用它时，请考虑将所有这些设置用于 bootstrap 3

@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
  

【讨论】：

要同时打印单个页面上的所有选项卡，请执行此操作***.com/a/13964669/381082 并在 Asp.Net MVC 中将 @ 替换为 @@，如此处所述 ***.com/a/7027543/381082。我非常感谢这个答案。使用这个 CSS，我的 6 页打印输出减少到 2 页！

【参考方案3】：

我最终使用自己的 print.css 文件解决了这个问题，但没有包含所有响应式引导程序的内容。仅包含一些必要的引导程序，包括显示和隐藏。

【参考方案4】：

对于那些使用引导混合创建这样的列（sass 版本）的人：

@include make-sm-column(3, 0);

像克里斯蒂娜建议的那样覆盖列类的样式是不够的。我发现的唯一简单解决方案是将 _variables.scss 中的 $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.scss 中

@page 
  size: A4;
  margin: 0;

@media print 

  html, body 
    width: 768px;
  
  body 
    margin: 0 auto;
  

  // .. your custom styles for print layout

【参考方案5】：

在你的 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;
    

【参考方案6】：

我遇到了类似的问题。我最终用 col-xs-* 替换了所有 col-md-* ，它就像一个魅力。这是示例代码

<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"  style="max-width: 110px;" /> </div>
  </div>
</div>

转换成

<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"  style="max-width: 110px;" /> </div>
  </div>
</div>