Question

我正在使用Twitter Bootstrap 3，但当我打印我的网页（通过文件＆gt;打印）时，它在XS（移动视图）中打印页面，如何强制它在MD中使用和打印（桌面视图）

它只适用于IE 9及以下版本。每个其他浏览器和IE 10+都有问题。

Answer 1

要修复它，我确实将以下内容添加到我的CSS

@media print {
  body {
    margin: 0;
    padding: 0 !important;
    min-width: 768px;
  }
  .container {
    width: auto;
    min-width: 750px;
  }
}

这似乎对我有用。

Answer 2

.col-xs-X在媒体查询之外就是它打印的原因。所有列的大小相同：100/12 = 8.333333％，因此.col-lg-6和.col-sm-6以及.col-xs-6和.col-md-6都是.container/.container-fluid的50％。< / p>

要使打印页面打印列，您需要添加打印介质查询：

@media print { 
    .container {
        max-width: none!important;
        width: 100%!important;
        padding-left: 0;
        padding-right: 0;
    }
    .row {
        margin-left: -1%;
        margin-left: -1%;
    }
    [class*="col-"] {
        float: left;
        padding-left: 1%;
        padding-right: 1%;
    }
    .col-sm-12,
    .col-md-12,
    .col-lg-12 {
        width: 100%
    }
    .col-sm-11,
    .col-md-11,
    .col-lg-11 {
        width: 91.66666667%
    }
    .col-sm-10,
    .col-md-10,
    .col-lg-10 {
        width: 83.33333333%
    }
    .col-sm-9,
    .col-md-9,
    .col-lg-9 {
        width: 75%
    }
    .col-sm-8,
    .col-md-8,
    .col-lg-8 {
        width: 66.66666667%
    }
    .col-sm-7,
    .col-md-7,
    .col-lg-7 {
        width: 58.33333333%
    }
    .col-sm-6,
    .col-md-6,
    .col-lg-6 {
        width: 50%
    }
    .col-sm-5,
    .col-md-5,
    .col-lg-5 {
        width: 41.66666667%
    }
    .col-sm-4,
    .col-md-4,
    .col-lg-4 {
        width: 33.33333333%
    }
    .col-sm-3,
    .col-md-3,
    .col-lg-3 {
        width: 25%
    }
    .col-sm-2,
    .col-md-2,
    .col-lg-2 {
        width: 16.66666667%
    }
    .col-sm-1,
    .col-md-1,
    .col-lg-1 {
        width: 8.33333333%
    }
}

Answer 3

请阅读http://getbootstrap.com/getting-started/#support-printing

它的要点是浏览器在打印时错误地/奇怪地处理媒体查询。它们不使用与物理纸张宽度相同的CSS视口宽度。

解决方法选项包括：

拥抱超小网格，确保您的网页在其下方可以接受。
自定义@screen-*个较少变量的值，以便将您的打印机纸张视为大于超小型。
添加自定义媒体查询以仅更改打印媒体的网格大小断点。

Answer 4

大多数浏览器的打印都很棘手 - 问题在于取决于浏览器，默认纸张尺寸及其方向（纵向或横向）以及悉尼目前的潮流，页面将以72ppi，96ppi或144ppi打印。

在Bootstrap中，媒体查询建立像素宽度带...例如＆＃34; XS＆＃34;介于544px-767px之间，因此根据（打印的）页面宽度，您的网站可能会恢复为＆＃34; xs＆＃34;或者＆＃34; sm＆＃34;打印时的宽度变量。

上面列出的使用@media print {}的解决方案在大多数情况下都可以解决问题 - 但事实仍然是网站需要考虑打印进行编码。

我在vinorodrigues/print-ready有一个例子，试图解释其中的一些问题和注意事项。

Twitter引导程序在XS中打印

4 个答案: