时间戳

首页 > 解决方案 > 如何在打印页面@media print 中对齐引导列？

php - 如何在打印页面@media print 中对齐引导列？

问题描述

Bootstrap 列没有进入打印页面并且对齐错误如何纠正这个问题？我不需要响应页面，但需要对齐打印页面。任何人都可以帮助我吗？

@media print {
     
     @page {
    margin: 2cm;
  }
  
  .col-md-1,.col-md-2,.col-md-3,.col-md-4,
  .col-md-5,.col-md-6,.col-md-7,.col-md-8, 
  .col-md-9,.col-md-10,.col-md-11,.col-md-12 {
    float: left;
  }

  .col-md-1 {
    width: 8%;
  }
  .col-md-2 {
    width: 16%;
  }
  .col-md-3 {
    width: 25%;
  }
  .col-md-4 {
    width: 33%;
  }
  .col-md-5 {
    width: 42%;
  }
  .col-md-6 {
    width: 50%;
    float: left;
  }
  .col-md-7 {
    width: 58%;
  }
  .col-md-8 {
    width: 66%;
  }
  .col-md-9 {
    width: 75%;
  }
  .col-md-10 {
    width: 83%;
  }
  .col-md-11 {
    width: 92%;
  }
  .col-md-12 {
    width: 100%;
  }
}

网页

[<div class="container border border-dark" id="container">
<div class="row">

  <div style="font-size:25px; font-weight:bold; text-decoration: underline;" class="col-md-10">KERCHANSHE TRADING PLC
   <div style="font-size:15px;margin-right: 5px;margin-left: 34px;"><i class="fa fa-mobile" style="font-size:18px;margin-right: 5px;" aria-hidden="true"></i> 091 121 2436  
   <i class="fa fa-phone" style="font-size:18px;margin-right: 5px;margin-left: 31px;" aria-hidden="true"></i> 011 371 6370</div>
  
  <div style="font-size:15px;margin-left: 80px;">Addis Ababa, Ethiopia</div>
  </div>  
  <div style="font-size:20px; font-weight:bold; border: 1px solid black;text-align: center;height: min-content;" 
        class="col-md-2 border border-dark">ORIGNAL</div> 
</div>


<div class="form-group">
        <input type="text" class="form-control" placeholder="MinVal">
    </div>
    <div class="form-group">    
         <input type="text" class="form-control" placeholder="MaxVal">   
    </div>




<div class="row">
<div class="col-md-6"></div> 
<div class="col-md-4" style="margin-left: 18px;">
    <div class="input-group input-group-sm mb-3">
  <div class="input-group-prepend">
    <span class="input-group-text" id="inputGroup-sizing-sm">Cert. No</span>
  </div>
  <input type="text" id="cert1_no" class="form-control input-sm" aria-label="Small" aria-describedby="inputGroup-sizing-sm">
</div>
</div>
</div>

<div class="row">
<div class="col-md-6"></div> 
<div class="col-md-4" style="margin-left: 18px;">
    <div class="input-group input-group-sm mb-3">
  <div class="input-group-prepend">
    <span class="input-group-text" id="inputGroup-sizing-sm">Addis Ababa</span>
  </div>
  <input type="text" id="addis_ababa" class="form-control input-sm" aria-label="Small" aria-describedby="inputGroup-sizing-sm">
</div>
</div>
</div>




  <div class="row">
                <div class="col-xl-5 col-lg-6 col-md-8 col-sm-10 mx-auto text-center form p-4">
                  <span style="font-size:30px; font-weight:bold; text-decoration: underline;">CERTIFICATE</span>                    
                </div>   
            </div>
             <span style="font-size:20px; text-decoration: underline;margin-left: 19%;">
                       <b>CERTIFICATE OF CLEANLINESS AND GRADE OF ETHIOPIAN COFFEE</b>
                       </span><br/><br/>
                      


<div class="row">
    <div class="col-md-3">
    <input name="origin" type="text" class="form-control" id="origin_cert1"/>
     <span style="">(Origin)</span>
    </div>
    <div class="col-md-9">
    <span class="pull-right"> <input name="grade" type="text" class="form-control" id="grade_cert1"/>
       <span style="">(Grade)</span>
    </span>
    </div>
  </div>
   <br>

<div style="font-size:15px;">
<p style="text-align: center;font-weight: 700; font-size: 18px;">Description of Lot</p>            
  <table class="table tablecert1 table-bordered"> 
  <tr>
    <th colspan="4" style="text-align: center;">BAGS</th>    
  </tr>
  <tr>
    <th rowspan="2" style="text-align: center;">No</th>
    <th colspan="2" style="text-align: center;">Weight</th>
    <th rowspan="2" style="text-align: center;">Mark</th>
  </tr>
  <tr>    
    <th style="text-align: center;">Gross</th>
    <th style="text-align: center;">Net</th>
  </tr>
  <tr>
    <td><input style="" id="no_1" class="form-control no" type="text"></td>
     <td><input style="" id="gross_1" class="form-control gross" type="text"></td>
     <td><input style="" id="net_1" class="form-control net" type="text"></td>
     <td><input style="" id="mark_1" class="form-control mark" type="text"></td>
  </tr>
    <tr>
    <td><input style="" id="no_2" class="form-control no" type="text"></td>
     <td><input style="" id="gross_2" class="form-control gross" type="text"></td>
     <td><input style="" id="net_2" class="form-control net" type="text"></td>
     <td><input style="" id="mark_2" class="form-control mark" type="text"></td>
  </tr>
    <tr>
    <td><input style="" id="no_3" class="form-control no" type="text"></td>
     <td><input style="" id="gross_3" class="form-control gross" type="text"></td>
     <td><input style="" id="net_3" class="form-control net" type="text"></td>
     <td><input style="" id="mark_3" class="form-control mark" type="text"></td>
  </tr>
    <tr>
    <td><input style="" id="no_4" class="form-control no" type="text"></td>
     <td><input style="" id="gross_4" class="form-control gross" type="text"></td>
     <td><input style="" id="net_4" class="form-control net" type="text"></td>
     <td><input style="" id="mark_4"class="form-control mark" type="text"></td>
  </tr>
    <tr>
    <td><input style="" id="no_5" class="form-control no" type="text"></td>
     <td><input style="" id="gross_5" class="form-control gross" type="text"></td>
     <td><input style="" id="net_5" class="form-control net" type="text"></td>
     <td><input style="" id="mark_5" class="form-control mark" type="text"></td>
  </tr>
    <tr>
    <td><input style="" id="no_6" class="form-control no" type="text"></td>
     <td><input style="" id="gross_6" class="form-control gross" type="text"></td>
     <td><input style="" id="net_6" class="form-control net" type="text"></td>
     <td><input style="" id="mark_6" class="form-control mark" type="text"></td>
  </tr>
</table>
  </table>
</div>


 <div class="row">
<div class="input-group mb-1 col-md-6">
  <div class="input-group-prepend">
    <span class="input-group-text" id="basic-addon1">Driver's Name</span>
  </div>
  <input type="text" class="form-control" id="driversname" aria-label="Username" aria-describedby="basic-addon1">
</div>
 </div>
<div class="row">
<div class="input-group mb-1 col-md-6">
  <div class="input-group-prepend">
    <span class="input-group-text" id="basic-addon1">Truck Plate No.</span>
  </div>
  <input type="text" class="form-control" id="truckplateno" aria-label="Username" aria-describedby="basic-addon1">
</div>
</div>
        <div class="row">
<div class="input-group mb-1 col-md-6">
  <div class="input-group-prepend">
    <span class="input-group-text" id="basic-addon1">Trailer No.</span>
  </div>
  <input type="text" class="form-control" id="trailerno" aria-label="Username" aria-describedby="basic-addon1">
</div>
</div>
<div class="row">
<div class="input-group mb-1 col-md-6">
  <div class="input-group-prepend">
    <span class="input-group-text" id="basic-addon1">Container No.</span>
  </div>
  <input type="text" class="form-control" id="containerno" aria-label="Username" aria-describedby="basic-addon1">
</div>
    <div class="form-inline">                            
        <label for="exampleInputEmail1" style="MARGIN-LEFT: 50PX;font-weight: 700;text-decoration:overline;">KERCHANSHE TRADING PLC</label>       
    </div>
</div>
<div class="row">
<div class="input-group mb-1 col-md-6">
  <div class="input-group-prepend">
    <span class="input-group-text" id="basic-addon1">Seal No.</span>
  </div>
  <input type="text" class="form-control" id="sealno" aria-label="Username" aria-describedby="basic-addon1">
</div>
</div><br>
<div class="row">
 <div class="form-group form-inline">                            
        <label for="exampleInputEmail1" style="MARGIN-LEFT: 550PX;font-weight: 700;text-decoration:overline;">Signature of Licensed Coffee Cleaners & Graders</label>
           
    </div>
    </div>
    

</div>][1]

我附上了我的打印页，请找到它。并建议我在哪里必须更改 css 中媒体打印中的代码？

实际上页面应该像这个 真实的页面应该是这样的

打印错误页面看起来像 打印页面

function printDiv_kerch() {

   var divToPrint = document.getElementById('container');
  
    var newWin = window.open('', 'Print-Window', '');
    newWin.document.open();
    newWin.document.write('<html><head>');
    newWin.document.write('<link rel="stylesheet" type="text/css" media="print" href="http://localhost/verbat/css/certi.css"></head>');
    newWin.document.write('<link rel="stylesheet" type="text/css" media="print" href="http://localhost/verbat/bootstrap-4.3.1-dist/bootstrap.min.css"></head>');
    newWin.document.write('<body style="" onload="window.print();window.close();">' + divToPrint.innerHTML + '');
    newWin.document.write('</body></html>');
    newWin.document.close();
    setTimeout(function() {
        newWin.close();
    }, 500);
    
}

标签： phphtmlcss

解决方案

推荐阅读