分页内部不能在我的打印中工作

Question

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

$userId = \Auth::id();
$user = User::findOrFail($userId);

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

在我的print.scss中我说卡片<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>必须是避免的：

page-break-inside

但是这会导致打印输出：