6

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

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

4

3 回答 3

15

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

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

.collapse {
    display: block !important;
    height: auto !important;
}
于 2014-05-01T02:24:07.403 回答
1

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

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

@media print {
    /* your stylesheet for printing, eg.: */
    .accordion-group .accordion-body.collapse {
        height: auto;
    }
}
于 2013-01-11T20:09:23.827 回答
1

在 Bootstrap 4 中，您可以使用显示实用程序类，例如：

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

于 2018-04-14T16:28:30.023 回答