Bootstrap 4中的分页符

玛哈·索比(Maha Sobhy)

我正在为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;

    }
}

必需我要每页打印12列

霍萨姆·艾尔扎(Hosam Elzagh)

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

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

}

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

Bootstrap列中的自动分页

来自分类Dev

Laravel 4 Twitter Bootstrap 3的分页错误

来自分类Dev

AngularJS + Bootstrap分页

来自分类Dev

Bootstrap DataTables 的分页与分页的区别

来自分类Dev

使用bootstrap进行bootstrap分页折叠

来自分类Dev

如何在jQuery Bootstrap DataTables插件中居中分页?

来自分类Dev

从React Bootstrap表中禁用/删除分页号

来自分类Dev

尝试使用React Bootstrap分页显示数组中的项目

来自分类Dev

在分页,angular-bootstrap中添加文本而不是数字

来自分类Dev

UI Bootstrap分页,自定义模板中的itemsPerPage?

来自分类Dev

Laravel 中的自定义 Bootstrap 分页错误

来自分类Dev

在 bootstrap-vue 中自定义 b 分页

来自分类Dev

Bootstrap 4 与 Bootstrap 3 对齐

来自分类Dev

Bootstrap 4中的居中图标

来自分类Dev

Bootstrap 4 中的下拉错误

来自分类Dev

如何对使用UI Bootstrap分页进行分页的AngularJS中的所有记录进行排序和筛选

来自分类Dev

DataTables Bootstrap分页不呈现

来自分类Dev

导航元素之间的Bootstrap分页

来自分类Dev

Bootstrap将标签与分页对齐

来自分类Dev

表分页[Bootstrap-Django]

来自分类Dev

Bootstrap 分页不起作用

来自分类Dev

Bootstrap 3 表分页错误

来自分类Dev

在分页预览中自动插入分页符

来自分类Dev

使用Bootstrap4更改文本输入的占位符

来自分类Dev

ContentEditable(WYSIWYG)中的分页符

来自分类Dev

ng2-bootstrap分页和bootstrap表集成错误

来自分类Dev

与bootstrap3一起使用的Rails 4分页,will_paginate和Kaminari

来自分类Dev

与bootstrap3一起使用的Rails 4分页,will_paginate和Kaminari

来自分类Dev

使用Bootstrap 4的Bootstrap选择jQuery插件