Twitter Bootstrap Accordion - 如何在所有扩展的情况下打印？答案

【问题标题】：Twitter Bootstrap Accordion - How to print with all expanded?Twitter Bootstrap Accordion - 如何在所有扩展的情况下打印？
【发布时间】：2012-12-26 05:09:08
【问题描述】：

我在整个网站上到处都在使用 Twitter Bootstrap 手风琴。它们工作得很好，我刚刚注意到的问题是我是否想打印一个页面。理想情况下，如果要为我的目的打印页面，它们都应该展开。

有谁知道解决这个问题的最佳方法？我知道我可以通过 javascript 将某些内容连接到页面上的“打印”按钮，但我们假设用户将使用浏览器的“打印”按钮 - 所以将 javascript 绑定到此可能不是一个选项。

【问题讨论】：

This answer 展示了处理打印的正确方法。

标签： printing twitter-bootstrap

【解决方案1】：

使用CSS media types 并将所有手风琴的样式设置为展开，如果媒体用于打印。

这里的小例子，扩展所有手风琴仅用于打印：

@media print {
    /* your stylesheet for printing, eg.: */
    .accordion-group .accordion-body.collapse {
        height: auto;
    }
}

【讨论】：

为了完成这项工作，我必须在 height:auto 中添加一个 !IMPORTANT。

【解决方案2】：

我使用的是 bootstrap 3.1.1 和默认情况下的 bootstrap.css。我也在使用此页面中的示例手风琴 html： http://getbootstrap.com/javascript/#collapse

对我来说，将此规则添加到 .css 文件的@media print {..} 部分成功了：

.collapse {
    display: block !important;
    height: auto !important;
}

【讨论】：

也适用于 Bootstrap 4。

【解决方案3】：

在 Bootstrap 4 中，您可以使用display utility classes，例如：

<div class="collapse d-print-block">...</div>

【讨论】：