Question

我在正确格式化我的引导面板以进行打印时遇到问题。包含在引导程序面板中的图表超出了右侧的面板边框（仅当我打印时，实际网页上的一切看起来都很好）并且图表会被分页符拆分。我尝试过使用打印媒体查询并使用page-break-inside和page-break-after但没有任何工作（尽管我可能做错了。）

这是我使用引导板的代码。我也使用Font Awesome作为一些交互式按钮，我正在使用canvasJS作为我的图表。

<div class="row">
        <div class="col-sm-6">
            <div class="panel panel-primary">
                <div class="panel-heading">
                    <h3 class="panel-title">Work Orders by Priority
                        <a data-toggle="collapse" data-target="#collapse1">
                            <span class="fa fa-line-chart pull-right panelColBtn rotate"/>
                        </a>
                    </h3>
                </div>
                <div id="collapse1" class="panel-collapse collapse in">
                    <div class="panel-body">
                        <div>
                            <div id="chartContainer1" style="height: 450px; width: 100%;"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-sm-6">
            <div class="panel panel-primary">
                <div class="panel-heading">
                    <h3 class="panel-title">% of Work Requests with Repair Tags
                        <a data-toggle="collapse" data-target="#collapse2">
                            <span class="fa fa-line-chart pull-right panelColBtn rotate"/>
                        </a>
                    </h3>
                </div>
                <div id="collapse2" class="panel-collapse collapse in">
                    <div class="panel-body">
                        <div>
                            <div id="chartContainer2" style="height: 450px; width: 100%;"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

以下是我尝试解决分页问题的打印媒体查询。

@media print {
    div.panel, div.panel-primary {
        page-break-inside: avoid !important;
        page-break-after: auto !important;
    }
}

我在来到这里之前检查了这个帖子，然后跟着它，但似乎原始的海报也从未能让它正常工作。 Printing Twitter Bootstrap correctly

有人可以解释如何解决这个问题吗？

格式化用于打印的引导面板

0 个答案: