时间戳

首页 > 解决方案 > Bootstrap 4中的分页符

twitter-bootstrap - Bootstrap 4中的分页符

问题描述

我正在为 Web 应用程序制作打印样式表。该应用程序使用 Bootstrap v4.1.0

我在stackoverflow上尝试了所有的灵魂，但我无法修复它

以下 HTML 代码：

<div id="container-fluid">
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-body">
                    <div class="row">
                        <div class="col-12 student">
                            <p>sdd</p>
                            <p>1000</p>
                            <p>R1f17sdf56</p>
                        </div>
                        <div class="col-12 student">
                            <p>xxxxx  df</p>
                            <p>1001</p>
                            <p>dfdfg</p>
                        </div>
                        <div class="col-12 student">
                            <p>sdd</p>
                            <p>1002/p>
                            <p>dfgd</p>
                        </div>
                        <div class="col-12 student">
                            <p>cvbcv</p>
                            <p>1003</p>
                            <p>vxgsd</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

以下CSS代码：

@media print{

    .student , col-12{
        /*page-break-after: always;*/
        page-break-after: always;
        page-break-inside: avoid;
        -webkit-column-break-inside: avoid;
        break-inside: avoid;

        display: block !important;

    }
}

必需 我想每页打印 col-12 之一

标签： twitter-bootstrap

解决方案

行显示块将解决问题 .row{display: block;}

@media print{
    .row{
        display: block;
    }
    .page-break {
        page-break-after: always;
    }

}

推荐阅读