Question

我使用bootstrap并在报告中使用此结构：

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    </head>
    <body>
        <h2>I want Two Equal Columns when printing a Portrait A4 Report </h2>
        <div class="container>
            <div class="row">
                  <div class="col-sm-6">
                        <h2>Left Column</h2>
                        <p>This is a test with a large information that I would like to have two columns even if printed in portrait mode.</p>
                  </div>
                  <div class="col-sm-6">
                        <h2>Right Column</h2>
                        <p>This is a test with a large information that I would like to have two columns even if printed in portrait mode.</p>
                  </div>
            </div>
        </div>
    </body>

当我以横向格式打印时，一切都是正确的：

但是当我用肖像打印时：

即使在纵向模式下，如何并排制作两列？

Answer 1

＆＃13;

 body {
    margin: 0;
    padding: 0;
  }
  * {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
  }
  .page {
    width: 21cm;
    min-height: 29.7cm;
    padding: 2cm;
    margin: 1cm auto;
    border-radius: 5px;
    background: white;
  }

  @page {
    size: A4;
    margin: 0;
  }
  @media print {
    .page {
      margin: 0;
      border: initial;
      border-radius: initial;
      width: initial;
      min-height: initial;
      box-shadow: initial;
      background: initial;
      page-break-after: always;
    }
  }
  table {
    background-color: transparent;
    width: 100% !important;
    margin-bottom: 0px;
  }
   
h2{
  font-size: 23px;
  margin-top: 10px;
    margin-bottom: 10px;
}

＆＃13;

<!-- Bootstrap -->
  <link href="assets/bootstrap/css/bootstrap.min.css" rel="stylesheet">
   <!-- Normalize or reset CSS with your favorite library -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/7.0.0/normalize.min.css">
  
   <div class="page">
<table>
      <tr>
        <td style="width: 100%"><h2>I want Two Equal Columns when printing a Portrait A4 Report </h2></td>
      </tr>
    </table>

<table>
      <tr>
        <td style="width: 50%"><h2>Left Column</h2></td>
        <td style="width: 50%"><h2>Right Column</h2></td>
      </tr>
    </table>


 <table>
      <tr>
        <td style="width: 50%"><p>This is a test with a large information that I would like to have two columns even if printed in portrait mode.</p></td>
         <td style="width: 50%"><p>This is a test with a large information that I would like to have two columns even if printed in portrait mode.</p></td>
      </tr>
    </table>



</div>

＆＃13;

无响应两列

1 个答案: