引导打印宽度

Posted 2023-03-06

【中文标题】引导打印宽度

【英文标题】：bootstrap printing width

【发布时间】：2012-08-28 02:04:57

【问题描述】：

我在应用程序中使用引导程序，正如您在打印浏览器（左侧）时所见（下图） 打印时使用了非常小的宽度（右），因此响应式布局将所有右侧站点元素移动到左侧元素下方，并且打印版本不适合单个页面。

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

谢谢，

雷莫

.

【问题讨论】：

我的回答有帮助吗？你的问题似乎真的和我的一样。如果它解决了您的问题，我会要求引导开发人员在他们的文档中提及 media="screen" 属性：github.com/twitter/bootstrap/blob/master/docs/…

【参考方案1】：

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

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

【讨论】：

如果你是从 bootstrapcdn.com 加载的，以后的版本没有单独的bootstrap-responsive.css，只有bootstrap-combined.min.css 是包括响应式样式在内的所有内容，bootstrap.min.css 是除了响应式样式。作为一种解决方法，您可以使用单独的 media 设置加载两个文件：<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap.min.css" rel="stylesheet" media="print"> 和 <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" media="screen">

如果您注意到两个不同的版本号，那是因为这个错误 github.com/netdna/bootstrap-cdn/pull/106 。在 v2.3.2 中，bootstrap.min.css 包含响应式样式，但不应该。

有谁知道如何使用 bootstrap 3 做到这一点？

@fande455 bootstrap 3 has native css classes 您可以申请切换打印时应显示的项目。

@ScottWoodall，除了 bootstrap 3 的隐藏 + 可见类之外还有什么可以解决这个问题吗？如果我必须为打印/屏幕创建单独的状态，那将意味着大量重复的 html。

【参考方案2】：

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

@media print 
  .container 
    width:100%;
  

【讨论】：

不适合我。它离开了页面。

但是固定宽度可以解决问题@media print body width:992px; 感谢您的想法。

这完美解决了我的全宽问题。谢谢。

【参考方案3】：

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

我正在使用 rails twitter bootstrap，它重新编译了较少的源代码，所以只需一点说明它也可以这样工作（bootstrap_and_overrides.css.less 的第一行）：

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

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