Twitter Bootstrap - Print all tab content

问题

I have the basic bootstrap tabs set up with no dynamically inserted content and print specific media queries in my base stylesheet. When the user prints from the browser I want all the tab content to print, not just the active tab. I know there has to be an easy solution to this, I just can't figure it out.

回答1:

try this in your print media query:

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

回答2:

@Scott's answer didn't work for me, and I think it is because I'm using bootstrap 4.

This is what worked for me in bootstrap 4. I added the display helper classes d-print-block, d-none, and d-print-none where appropriate.

I didn't want the top nav bar to print at all, so I added d-print-none

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

I wanted the individual tab-panes to print if on print media, so I added a header to the tab pane's content and added the d-none class so it wouldn't show in the browser, but also added d-display-block so it WOULD should in print media. I also added d-print-media to the tabpanel div itself so that it would show the entire contents in 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>

来源：https://stackoverflow.com/questions/13963801/twitter-bootstrap-print-all-tab-content

标签

printing

twitter-bootstrap

tabs