我试图生成一个打印命令，打印特定的div，并已成功地运行打印命令，并使用默认打印命令（CTRL + P）打印特定的布局，它也与按钮一起运行。

问题：

由于我打印的布局是基于bootstrap的，所以在Chrome和Firefox上看起来不同。
因此，基本上，Chrome删除了网格系统，并在新行中显示列（参见下面的屏幕截图），而Firefox在打印命令和PDF中显示了布局。
我不知道是什么原因导致了这个问题，为什么网格不能在Chrome的打印命令中正确渲染。
这是我正在尝试打印的页面代码。
我正在尝试打印的带有div的HTML：（我试图通过ID打印的div是：（“print_layout”）

<div id="print_layout">

  <div id="divToPrint" style="">
    <section class="section profile">
      <div class="tab-pane fade show active profile-overview" id="profile-overview">



        <div class="card">
          <div class="card-body pt-3">
            <!-- Bordered Tabs -->
                        <div class="tab-content pt-2">

              <div class="tab-pane fade show active profile-overview" id="profile-overview">

              <div class="row">
                <div class="col-lg-6 col-md-6 "><h1 class="" style="color:#a9313c;font-weight:700;font-size:40px">Vehari Orchard</h1></div>
                <div class="col-lg-6 col-md-6 "><h5 class="" style="">45-WB Road Vehari</h5><h5>Phone: 0313-4691111</h5></div>
              </div>
                 <div class="row">
<div class="col-lg-4 col-md-4 "><h5 class="card-title">Customer Details</h5></div>

                 </div>

<!-- C-000822123456789 -->

                <form name="new_sale" action="" method="post">
                  <div class="row">
                    <div class="col-lg-3 col-md-4 label ">Customer Name </div>
                    <div class="col-lg-9 col-md-8">Ahmad Wahid</div>                  </div>

                  <div class="row">
                    <div class="col-lg-3 col-md-4 label ">Customer CNIC </div>
                    <div class="col-lg-9 col-md-8">123456789</div>                  </div>

                                    <h5 h5="" class="card-title">Second Partner Details</h5>

                  <div class="row">
                    <div class="col-lg-3 col-md-4 label ">Customer Name </div>
                    <div class="col-lg-9 col-md-8">Rabnawaz</div>                  </div>

                  <div class="row">
                    <div class="col-lg-3 col-md-4 label ">Customer CNIC </div>
                    <div class="col-lg-9 col-md-8">9988774455566</div>                  </div>
                                    <h5 class="card-title">Property Details</h5>

                  <div class="row">
                    <div class="col-lg-3 col-md-4 label">Plot Number</div>
                    <div class="col-lg-9 col-md-8">22</div>                  </div>

                  <div class="row">
                    <div class="col-lg-3 col-md-4 label">Plot Type</div>
                                        <div class="col-lg-9 col-md-8">Commercial</div>
                    
                  </div>

                  <div class="row">
                    <div class="col-lg-3 col-md-4 label">Allocation Number</div>
                    <div class="col-lg-9 col-md-8">C-000822123456789</div>                  </div>

<div class="row">
<!-- <div class="col-lg-3 col-md-4 label">Time: </div>
                    <div class="col-lg-9 col-md-8">08:21:24pm</div></div> -->

<div class="row">
<div class="col-lg-3 col-md-4 label">Date: </div>
                    <div class="col-lg-9 col-md-8">17-08-2023</div></div>
                  <div class="row">
                    <div class="col-lg-3 col-md-4 label">Plot Price</div>
                    <div class="col-lg-9 col-md-8">RS: 2500000/-</div>                  </div>

                  <div class="row">
                    <div class="col-lg-3 col-md-4 label">Advance Received </div>
                    <div class="col-lg-9 col-md-8">RS:
                      500000/-
                    </div>
                  </div>

                  <div class="row">
                    <div class="col-lg-3 col-md-4 label">Discount</div>
                    <div class="col-lg-9 col-md-8">RS:
                      35500/-
                    </div>
                  </div>

                  <div class="row">
                    <div class="col-lg-3 col-md-4 label">Payment Method</div>
                    <div class="col-lg-9 col-md-8">
                      Cash                    </div>
                  </div>


                  <div class="row">
                    <div class="col-lg-3 col-md-4 label">Payment Plan</div>
                    <div class="col-lg-9 col-md-8">
                      84                    </div>
                  </div>

              </div>



              <!-- <div class="row mb-3">
                <div class="col-sm-10">
                  <button type="submit" class="btn btn-primary" name="submit">Submit Form</button>
                </div>
              </div> -->
              
              </form>

            </div><!-- End Bordered Tabs -->

          </div>
        </div>

    </div></div></section>
  </div>
  </div>

这是我用来运行print命令的按钮：

<button onClick="printdiv('print_layout');" class="btn btn-primary">PRINT</button>

仅打印特定div的Javascrpipt代码：

<script>
function printdiv(elem) {
  var header_str = '<html><head><title>' + document.title  + '</title></head><body>';
  var footer_str = '</body></html>';
  var new_str = document.getElementById(elem).innerHTML;
  var old_str = document.body.innerHTML;
  document.body.innerHTML = header_str + new_str + footer_str;
  window.print();
  document.body.innerHTML = old_str;
  return false;
}
</script>

到目前为止我所尝试的：

• 尝试在打印代码的标题中添加引导类，但不起作用。
• 尝试添加内联css以使网格系统工作，但它也不起作用。

有什么线索可能导致Chrome和Firefox上的打印屏幕布局发生变化吗？
谢谢你，谢谢
附上截图（第一个显示了使用html，bootstrap和php生成的原始div）和（第二个截图显示了使用上面添加代码的函数的相同div的打印视图，您可以清楚地看到列名：客户名称为1列，值为：Ahmad Wahid是同一行中的第二列，但在PDF/打印视图中出现了中断）：

关于发现的更新：当我在打印命令中从纵向切换到横向时，布局看起来很好，所以它与引导网格在打印屏幕布局中的工作方式有关。