html - 里面的分页符在我的打印中不起作用

Question

我有多个组件，如下所示：

@media print {
  .print-wrapper {
    page-break-inside: avoid;
    display: inline-block;
  }
}

<div class="print-wrapper">
 <div data-appear-animation="fadeInRightBig" class="card animated fadeInRightBig mb-5 benchmarkCard">        <div role="tab" id="heading6" class="card-header">
        <a data-toggle="collapse" href="#remarketingUtilization" aria-expanded="true" aria-controls="remarketingUtilization" class="collapsed">
        <i aria-hidden="true" class="fa fa-refresh"></i> 
           <strong class="adwords-category">Remarketing Utilization</strong> 
            <span class="pull-right total-score">
                14%
            </span>
        </a>
    </div> 
    <div id="remarketingUtilization" role="tabpanel" aria-labelledby="headingThree" class="collapse show">
        <div class="card-block p-4">
            <div class="row">
                <div class="col-md-12">
                    There are just 3 ways you can grow your business. By generating more Traffic,increasing
                    your Conversion Rate and optimizing Customer Value. But getting traffic
                    is easy... what will set you apart from the rest is building sustainable customer
                    relationships. Trust, relevance and user experience are the main ingredients
                    to achieve exactly that. Dasbot will assist you on all 3 growth levers. For instance, when
                    the Page Speed of your landing pages is slow, Dasbot will help you
                    optimize page load time.
    
                    <div class="btn-wrapper">
                        <button class="btn btn-outline mt-4 btn-compare">See
                            how you compare
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
  </div>
</div>

在我的 print.scss 中，我说page-break-inside必须避免使用该卡：

 .card {
   page-break-inside: avoid;
 }

但这会导致打印输出：

标签： htmlcssprint-style