如何“打破”引导布局然后打印？

【问题标题】：How to "break" a bootstrap layout then printing?如何“打破”引导布局然后打印？
【发布时间】：2018-12-31 00:54:48
【问题描述】：

我希望能够打印一些贴纸。 但是当我想打印视图时，一些用于显示每个数据集的引导卡被剪切在两页之间。

这是我的代码（树枝）：

{% block moteurs_body %}
    <p></p>
    {% set boucle = 6 %}

    <div class="container">

        {% for moteur in moteurs %}
            {% if (loop.index % (6*6) == 0) and not loop.first %}<div class="newPage"></div>{% endif %}
            {% if loop.first %}
                <div class="row">
            {% endif %}

            {% if boucle == 0 %}
                </div>
                <div class="row">
                {% set boucle = 6 %}
            {% endif %}
        <div class="col-2">
            <div class="card">
                <img class="card-img-top" src="../../{{ moteur.urlQRCode }}" alt="Mince, pas d'image...">
                <div class="card-body">
                    <p class="card-text text-center">
                        {{ moteur.numeroMoteur }}
                    </p>
                </div>
            </div>
        </div>

        {% set boucle = (boucle - 1) %}

        {% if loop.last %}
            </div>
        {% endif %}
    {% endfor %}
</div>

{% endblock %}

这里是客户端的HTML（只有少数出现问题的元素，贴了很多...）

    <div id="header" class=" text-center">
    <h5>Liste des certificats | <span class="badge badge-secondary">108 moteurs 250kg</span></h5>
    <h6 class="success">utilisez la fonction "imprimer" de votre navigateur pour imprimer au format A4</h6>
</div>

<p></p>

<div class="container">


                        <div class="row">

                    <div class="col-2">
            <div class="card">
                <img class="card-img-top" src="../..//images/qrcodes/m250/L0442MQ.png" alt="Mince, pas d'image...">
                <div class="card-body">
                    <p class="card-text text-center">
                        L0442MQ
                    </p>
                </div>
            </div>
        </div>




                    <div class="col-2">
            <div class="card">
                <img class="card-img-top" src="../..//images/qrcodes/m250/L0840PF.png" alt="Mince, pas d'image...">
                <div class="card-body">
                    <p class="card-text text-center">
                        L0840PF
                    </p>
                </div>
            </div>
        </div>




                    <div class="col-2">
            <div class="card">
                <img class="card-img-top" src="../..//images/qrcodes/m250/L0854PF.png" alt="Mince, pas d'image...">
                <div class="card-body">
                    <p class="card-text text-center">
                        L0854PF
                    </p>
                </div>
            </div>
        </div>




                    <div class="col-2">
            <div class="card">
                <img class="card-img-top" src="../..//images/qrcodes/m250/L0963RQ.png" alt="Mince, pas d'image...">
                <div class="card-body">
                    <p class="card-text text-center">
                        L0963RQ
                    </p>
                </div>
            </div>
        </div>




                    <div class="col-2">
            <div class="card">
                <img class="card-img-top" src="../..//images/qrcodes/m250/L2650SN.png" alt="Mince, pas d'image...">
                <div class="card-body">
                    <p class="card-text text-center">
                        L2650SN
                    </p>
                </div>
            </div>
        </div>




                    <div class="col-2">
            <div class="card">
                <img class="card-img-top" src="../..//images/qrcodes/m1000/L2662SN.png" alt="Mince, pas d'image...">
                <div class="card-body">
                    <p class="card-text text-center">
                        L2662SN
                    </p>
                </div>
            </div>
        </div>




                        </div>
            <div class="row">
                                    <div class="col-2">
            <div class="card">
                <img class="card-img-top" src="../..//images/qrcodes/m250/L2740RN.png" alt="Mince, pas d'image...">
                <div class="card-body">
                    <p class="card-text text-center">
                        L2740RN
                    </p>
                </div>
            </div>
        </div>




                    <div class="col-2">
            <div class="card">
                <img class="card-img-top" src="../..//images/qrcodes/m250/L3561TK.png" alt="Mince, pas d'image...">
                <div class="card-body">
                    <p class="card-text text-center">
                        L3561TK
                    </p>
                </div>
            </div>
        </div>




                    <div class="col-2">
            <div class="card">
                <img class="card-img-top" src="../..//images/qrcodes/m250/L3562TK.png" alt="Mince, pas d'image...">
                <div class="card-body">
                    <p class="card-text text-center">
                        L3562TK
                    </p>
                </div>
            </div>
        </div>




                    <div class="col-2">
            <div class="card">
                <img class="card-img-top" src="../..//images/qrcodes/m250/L3563TK.png" alt="Mince, pas d'image...">
                <div class="card-body">
                    <p class="card-text text-center">
                        L3563TK
                    </p>
                </div>
            </div>
        </div>




                    <div class="col-2">
            <div class="card">
                <img class="card-img-top" src="../..//images/qrcodes/m250/L3564TK.png" alt="Mince, pas d'image...">
                <div class="card-body">
                    <p class="card-text text-center">
                        L3564TK
                    </p>
                </div>
            </div>
        </div>




                    <div class="col-2">
            <div class="card">
                <img class="card-img-top" src="../..//images/qrcodes/m250/L3566TK.png" alt="Mince, pas d'image...">
                <div class="card-body">
                    <p class="card-text text-center">
                        L3566TK
                    </p>
                </div>
            </div>
        </div>




                        </div>
            <div class="row">
                                    <div class="col-2">
            <div class="card">
                <img class="card-img-top" src="../..//images/qrcodes/m250/L3567TK.png" alt="Mince, pas d'image...">
                <div class="card-body">
                    <p class="card-text text-center">
                        L3567TK
                    </p>
                </div>
            </div>
        </div>




                    <div class="col-2">
            <div class="card">
                <img class="card-img-top" src="../..//images/qrcodes/m250/L3568TK.png" alt="Mince, pas d'image...">
                <div class="card-body">
                    <p class="card-text text-center">
                        L3568TK
                    </p>
                </div>
            </div>
        </div>




                    <div class="col-2">
            <div class="card">
                <img class="card-img-top" src="../..//images/qrcodes/m250/L3569TK.png" alt="Mince, pas d'image...">
                <div class="card-body">
                    <p class="card-text text-center">
                        L3569TK
                    </p>
                </div>
            </div>
        </div>




                    <div class="col-2">
            <div class="card">
                <img class="card-img-top" src="../..//images/qrcodes/m250/L3570TK.png" alt="Mince, pas d'image...">
                <div class="card-body">
                    <p class="card-text text-center">
                        L3570TK
                    </p>
                </div>
            </div>
        </div>




                    <div class="col-2">
            <div class="card">
                <img class="card-img-top" src="../..//images/qrcodes/m250/L3665TK.png" alt="Mince, pas d'image...">
                <div class="card-body">
                    <p class="card-text text-center">
                        L3665TK
                    </p>
                </div>
            </div>
        </div>




                    <div class="col-2">
            <div class="card">
                <img class="card-img-top" src="../..//images/qrcodes/m250/L4397SR.png" alt="Mince, pas d'image...">
                <div class="card-body">
                    <p class="card-text text-center">
                        L4397SR
                    </p>
                </div>
            </div>
        </div>




                        </div>
            <div class="row">
                                    <div class="col-2">
            <div class="card">
                <img class="card-img-top" src="../..//images/qrcodes/m250/L4401SR.png" alt="Mince, pas d'image...">
                <div class="card-body">
                    <p class="card-text text-center">
                        L4401SR
                    </p>
                </div>
            </div>
        </div>




                    <div class="col-2">
            <div class="card">
                <img class="card-img-top" src="../..//images/qrcodes/m250/NL1149WC.png" alt="Mince, pas d'image...">
                <div class="card-body">
                    <p class="card-text text-center">
                        NL1149WC
                    </p>
                </div>
            </div>
        </div>




                    <div class="col-2">
            <div class="card">
                <img class="card-img-top" src="../..//images/qrcodes/m250/NL2722UK.png" alt="Mince, pas d'image...">
                <div class="card-body">
                    <p class="card-text text-center">
                        NL2722UK
                    </p>
                </div>
            </div>
        </div>




                    <div class="col-2">
            <div class="card">
                <img class="card-img-top" src="../..//images/qrcodes/m250/NL2726UK.png" alt="Mince, pas d'image...">
                <div class="card-body">
                    <p class="card-text text-center">
                        NL2726UK
                    </p>
                </div>
            </div>
        </div>




                    <div class="col-2">
            <div class="card">
                <img class="card-img-top" src="../..//images/qrcodes/m250/NL3482UK.png" alt="Mince, pas d'image...">
                <div class="card-body">
                    <p class="card-text text-center">
                        NL3482UK
                    </p>
                </div>
            </div>
        </div>




                    <div class="col-2">
            <div class="card">
                <img class="card-img-top" src="../..//images/qrcodes/m250/NL3493UK.png" alt="Mince, pas d'image...">
                <div class="card-body">
                    <p class="card-text text-center">
                        NL3493UK
                    </p>
                </div>
            </div>
        </div>




                        </div>
            <div class="row">
                                    <div class="col-2">
            <div class="card">
                <img class="card-img-top" src="../..//images/qrcodes/m250/NL3494UK.png" alt="Mince, pas d'image...">
                <div class="card-body">
                    <p class="card-text text-center">
                        NL3494UK
                    </p>
                </div>
            </div>
        </div>




                    <div class="col-2">
            <div class="card">
                <img class="card-img-top" src="../..//images/qrcodes/m250/NL5391UJ.png" alt="Mince, pas d'image...">
                <div class="card-body">
                    <p class="card-text text-center">
                        NL5391UJ
                    </p>
                </div>
            </div>
        </div>




                    <div class="col-2">
            <div class="card">
                <img class="card-img-top" src="../..//images/qrcodes/m500/NL5396UJ.png" alt="Mince, pas d'image...">
                <div class="card-body">
                    <p class="card-text text-center">
                        NL5396UJ
                    </p>
                </div>
            </div>
        </div>




                    <div class="col-2">
            <div class="card">
                <img class="card-img-top" src="../..//images/qrcodes/m250/NL5461UK.png" alt="Mince, pas d'image...">
                <div class="card-body">
                    <p class="card-text text-center">
                        NL5461UK
                    </p>
                </div>
            </div>
        </div>




                    <div class="col-2">
            <div class="card">
                <img class="card-img-top" src="../..//images/qrcodes/m250/SS2497TP.png" alt="Mince, pas d'image...">
                <div class="card-body">
                    <p class="card-text text-center">
                        SS2497TP
                    </p>
                </div>
            </div>
        </div>




                    <div class="col-2">
            <div class="card">
                <img class="card-img-top" src="../..//images/qrcodes/m250/SS2499TP.png" alt="Mince, pas d'image...">
                <div class="card-body">
                    <p class="card-text text-center">
                        SS2499TP
                    </p>
                </div>
            </div>
        </div>




                        </div>
            <div class="row">
                                    <div class="col-2">
            <div class="card">
                <img class="card-img-top" src="../..//images/qrcodes/m250/SS3465SR.png" alt="Mince, pas d'image...">
                <div class="card-body">
                    <p class="card-text text-center">
                        SS3465SR
                    </p>
                </div>
            </div>
        </div>




                    <div class="col-2">
            <div class="card">
                <img class="card-img-top" src="../..//images/qrcodes/m250/SS3466SR.png" alt="Mince, pas d'image...">
                <div class="card-body">
                    <p class="card-text text-center">
                        SS3466SR
                    </p>
                </div>
            </div>
        </div>




                    <div class="col-2">
            <div class="card">
                <img class="card-img-top" src="../..//images/qrcodes/m250/SS3472SR.png" alt="Mince, pas d'image...">
                <div class="card-body">
                    <p class="card-text text-center">
                        SS3472SR
                    </p>
                </div>
            </div>
        </div>




                    <div class="col-2">
            <div class="card">
                <img class="card-img-top" src="../..//images/qrcodes/m250/SS3475SR.png" alt="Mince, pas d'image...">
                <div class="card-body">
                    <p class="card-text text-center">
                        SS3475SR
                    </p>
                </div>
            </div>
        </div>




                    <div class="col-2">
            <div class="card">
                <img class="card-img-top" src="../..//images/qrcodes/m250/SS3476SR.png" alt="Mince, pas d'image...">
                <div class="card-body">
                    <p class="card-text text-center">
                        SS3476SR
                    </p>
                </div>
            </div>
        </div>


                                                <div class="newPage"></div>

                    <div class="col-2">
            <div class="card">
                <img class="card-img-top" src="../..//images/qrcodes/m250/SS3477SR.png" alt="Mince, pas d'image...">
                <div class="card-body">
                    <p class="card-text text-center">
                        SS3477SR
                    </p>
                </div>
            </div>
        </div>

这是我的 CSS 的一部分：

.newPage {
    display: block;
    break-before:always;
}

还有我不想要的：

Screen Capture

我希望每页有 36 个贴纸，所以我尝试计算循环以在每 36 个贴纸插入一个 .newPage css 规则，但没有成功。 有人有想法让每个 36 个数据集转到一个新页面吗？

非常感谢您的帮助

【问题讨论】：

  • 在您的问题中包含实际的 HTML。服务器端的东西并不能告诉我们显示的样子。
  • 您好 miken82，感谢您的回答。我添加了 html 代码和一张图片，这样你就可以“看到”我不想要的东西。

标签： css twitter-bootstrap printing


【解决方案1】：

这似乎是一个 Chrome 问题，在网络上有一点记录。 我在Safari上试过我的代码，没关系。

如果有人知道如何修复我的代码以便在 Chrome 上工作，我接受！但目前我将在 Safari 上运行它。

感谢您的帮助

【讨论】：

    猜你喜欢
    • 2018-12-08
    • 2015-07-28
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2012-01-10
    • 2012-11-01
    • 2023-03-24
    • 1970-01-01
    相关资源
    最近更新 更多
    热门标签
    Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode