Question

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

Answer 1

在您的打印媒体查询中尝试此操作：

.tab-content > .tab-pane {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
}

Answer 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进行打印，因此我在标签窗格的内容中添加了标题，并添加了d-none类，这样它就不会在浏览器中显示，但是还添加了d-display-block，因此应该在印刷媒体中使用。我还向TabPanel div本身添加了d-print-media，以便它可以在打印介质中显示全部内容。

<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>

Twitter Bootstrap - 打印所有标签内容

2 个答案: