使用bootstrap打印页面3

Question

我一直在寻找关于stackoverflow的很多答案,半封面我想知道的,但没有发现任何对我有用的东西.

我知道A4的打印页面大约是550像素,因此bootstrap将使用通常用于移动设备的样式和布局.

当我使用Ctrl + P作为我的网页时,可打印页面看起来就像我的页面的移动版本.但是如何让它看起来像桌面版？(媒体> 1024 px)有办法做到这一点吗？

我知道我可以专门为打印更改css.但是如何使用bootstrap 3网格系统来解决这个问题呢？我的div上的宽度基于我为col-xs添加的内容,但我希望print使用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中为所有元素添加静态宽度来实现此目的？

提前致谢

Answer 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%;
 }

  }

Answer 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
  }
}

Answer 3

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