Twitter Bootstrap手风琴 - 如何打印所有扩展？

Question

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

有谁知道最好的方法吗？我知道我可以通过javascript连接到页面上的“打印”按钮，但我们假设用户将使用浏览器的“打印”按钮 - 因此将javascript绑定到此可能不是一种选择。

Answer 1

我正在使用bootstrap 3.1.1和bootstrap.css，因为它默认出现。 我也在使用此页面中的示例accordion html： http://getbootstrap.com/javascript/#collapse

并且我将此规则添加到 .css文件的@media print {..}部分可以解决问题：

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

Answer 2

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

此处的小例子，仅针对打印扩展所有手风琴：

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

Answer 3

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

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