如何管理 Twitter Bootstrap 的“row”和“span(X)”等类以在 @media print 上工作？

Posted 2023-03-06

【中文标题】如何管理 Twitter Bootstrap 的“row”和“span(X)”等类以在 @media print 上工作？

【英文标题】：How can I manage classes like "row" and "span(X)" of Twitter Bootstrap to work on @media print?

【发布时间】：2013-05-13 15:52:13

【问题描述】：

我需要在我的网站上打印网页，我想知道如何使 Bootstrap 的 row 和 spanX 类工作，以便我可以轻松管理打印页面的内容。 例如：

<div class="row-fluid"><div class="span12"><strong>Some stuff</strong></div></div>

和

<div class="row-fluid"><div class="span6 offset6"><strong>Some stuff</strong></div></div>

调用window.print()时看起来完全一样。

在上面的例子中，<strong>Some stuff</strong> 没有被offset6 推进。

我做了两件事：

从bootstrap.css获取所有@media print代码和 bootstrapresponsive.css;

将media 更改为all：从<link rel="stylesheet" type="text/css" href="/path/css/bstrapmin.css" media="screen" /> 更改为<link rel="stylesheet" type="text/css" href="/path/css/bstrapmin.css" media="all" />;

通过这些更改，页眉、页脚和引导（原始）字体已出现在打印页面上，但仍然没有来自/类的影响。

谢谢。

【参考方案1】：

您是否制作了单独的样式表并将其放在所有其他样式表之后并执行

<link rel="stylesheet" type="text/css" href="/path/css/print-stylesheet.css" media="print" />

您在其中放置的任何内容都将覆盖您在 media="screen" 样式表中的任何其他样式。只需确保它是 DOM 中调用的最后一个 CSS 文件。

如果您必须在打印样式表中包含 @media print，我忘记了，我认为 media="print" 会解决这个问题

【讨论】：

谢谢，但我认为您的回答不能解决我的问题。请再读一遍。

您在文件中调用的所有 CSS 文件是什么？只是“bstrapmin.css”（我假设您已经对其进行了定制以满足您的需求？）？此外，这是项目定位或项目字体样式的问题吗？您说“引导（原始）字体已出现在打印页面上”的那一行是我认为让我失望的地方。

我的 CSS 文件都没有覆盖引导类。我的观点是，如果 bootstrap css 的字体正常工作，为什么 row 和 span 不工作？

我明白了。好吧，我希望你能找到你的答案！唯一可能有帮助的是确保您的 @print 媒体查询位于文件的最底部或将所有内容移至 media="print" 链接中......或尝试进行完全独立的 test 仅包含打印 CSS 样式（没有其他）的文件来测试这些类的行为，没有其他样式妨碍和覆盖。如果您仍然无法让它们看起来正确，也许这是一个引导程序问题。祝你好运！！

感谢您的关注。我在不使用引导类的情况下解决了我的问题。我使用边距和填充来管理页面中的内容。