21

我设置了基本的引导选项卡，没有动态插入内容，并在我的基本样式表中打印特定的媒体查询。当用户从浏览器打印时，我希望打印所有选项卡内容，而不仅仅是活动选项卡。我知道必须有一个简单的解决方案，我就是想不通。

4

2 回答 2

48

在您的印刷媒体查询中试试这个：

.tab-content > .tab-pane {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
}
于 2012-12-20T03:05:17.157 回答
2

@Scott 的回答对我不起作用，我认为这是因为我使用的是 bootstrap 4。

这就是在引导程序 4 中对我有用的方法。我在适当的地方添加了显示帮助程序类d-print-block、d-none和d-print-none。

我根本不想打印顶部导航栏，所以我添加了d-print-none

<ul class="nav nav-tabs nav-bordered d-print-none" role="tablist" id="mainTabs">

tab-pane如果在打印媒体上，我希望个人s 打印，所以我在选项卡窗格的内容中添加了一个标题并添加了d-none该类，因此它不会显示在浏览器中，但也添加d-display-block了它应该在打印媒体中。我还添加d-print-media了 tabpanel div 本身，以便它可以在打印媒体中显示全部内容。

<div role="tabpanel" class=" fade in show active tab-pane d-print-block" id="myTab">
    <div class="header-title d-none d-print-block">My Tab Name</div>
    Lorem ipsum dolor sit amet...
</div>
于 2018-10-12T20:03:26.183 回答