自举印刷宽度

Question

我在app中使用bootstrap，打印浏览器时可以看到（如下）（左侧） 在打印时使用非常小的宽度（右），因此响应式布局将所有正确的网站元素移动到左侧下方，并且打印版本不适合单页。

您知道如何强制浏览器保持正确的宽度？

谢谢，

雷莫

Answer 1

我有一个非常类似的问题。 确保只为media="screen"启用responsive css才能解决问题。

<link href="assets/css/bootstrap-responsive.css" rel="stylesheet" media="screen">

Answer 2

对于Bootstrap 3，这解决了我的问题：

@media print {
  .container {
    width:100%;
  }
}

Answer 3

摆脱响应式风格就是答案！非常感谢！

我正在使用rails twitter bootstrap，它会重新编译更少的源代码，所以只需要注意它也可以这样工作（bootstrap_and_overrides.css.less的第一行）：

@import "twitter/bootstrap/bootstrap.less";
@media screen {
    @import "twitter/bootstrap/responsive.less";
}

oops：编辑，它在开发中工作正常，但在编译生产时会出错...必须为屏幕和打印版本构建2个不同的bootstrap_and_overrides（寻找更清洁的解决方案）