Question

我在页面上有一组“col-md-6”div。它们占据页面宽度的一半，直到屏幕调整到一定大小以下，它们垂直堆叠。

当我打印屏幕时，它们总是垂直堆叠，即使页面与div并排可以完美阅读。

通过使用col-sm-6和col-xs-6的实验，我发现将divs并排打印的唯一方法是使用col-xs-6，但这意味着div不会叠加在非常小（手机）显示。因此看起来bootstrap认为打印机具有与移动电话相同的宽度/分辨率。

我做错了吗？为什么bootstrap认为打印机的分辨率如此之低？我可以做些什么来改变这个吗？

Answer 1

我在这里使用了克里斯蒂娜给出的类似问题的答案，

即通过添加到css media print来查看col-sm，就像它是col-xs

@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

作为CSS的替代方案，如果您在Less。

中工作，则可以执行此操作

@media print { .make-grid(md); }

根据您想要使用的屏幕分辨率重新设置'md'。我发现在我的情况下，md在屏幕和纸上看起来最好。

这将在编译Less代码时调用bootstrap的.make-grid mixin。

Answer 3

为解决这个问题，我创建了一个print.css并包含：

@page {
    size: A4;
  /* margin: 40px; */ 
    margin: 0mm;
}
html, body {
    width: 1024px;
}

然后在我的_Layout页面中包括：

<link rel="stylesheet" type="text/css" media="print" href="../../Content/Print.css" />

如何使bootstrap3类与打印兼容

3 个答案: