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の答えは私にはうまくいきませんでした、そしてそれは私がブートストラップ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が、印刷メディアに表示されるように追加しました。また、タブパネル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>
于 2018-10-12T20:03:26.183 に答える