Bootstrap 丢失排版打印人像

Question

我从一个网站创建了一个看起来像可用的模板，并愉快地开始使用它。当我打印信息时，我的打印机最初设置为横向，所以一切看起来都很好，我得到了一个漂亮的报告，整齐地居中在页面中。以下是我生成的文件（我使用的是 jinja2 模板，但如果我知道 HTML/CSS 有什么问题，我可以修复模板）。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Bootstrap 4, from LayoutIt! -->
    <title>SPoE Testing</title>

    <meta name="description" content="Source code generated using layoutit.com">
    <meta name="author" content="LayoutIt!">

    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">

  </head>
  <body>
    <div class="container-fluid">
    <div class="row">
        <div class="col-md-3">
        </div>
        <div class="col-md-6">
            <div class="page-header">
                <h1>
                    Integrated Next-Generation Test System
                </h1>
                <hr>
            </div>
        </div>
        <div class="col-md-3">
        </div>
    </div>
    <div class="row">
        <div class="col-md-3">
        </div>
        <div class="col-md-6">
            <div class="page-header">
                <h2>
                    Single PoE <small>Unit 0000000 at 2019-05-23 23:59:59</small>
                </h2>
                <hr>
            </div>
            <div class="row">
                <div class="col-md-4">
                <h3>#0000000</h3>
                </div>
                <div class="col-md-8">
                <h3>pass</h3>
                </div>
            </div>

            <div class="row">
                <div class="col-md-4">
                <h5>Step 1</h5>
                </div>
                <div class="col-md-8">
                <h5>pass</h5>
                </div>
            </div>

            <div class="row">
                <div class="col-md-1"></div>
                <div class="col-md-3">
                power
                </div>
                <div class="col-md-8">
                28.1
                </div>
            </div>

            <div class="row">
                <div class="col-md-1"></div>
                <div class="col-md-3">
                current
                </div>
                <div class="col-md-8">
                525
                </div>
            </div>

            <div class="row">
                <div class="col-md-1"></div>
                <div class="col-md-3">
                voltage
                </div>
                <div class="col-md-8">
                53.7
                </div>
            </div>

        </div>
        <div class="col-md-3">
        </div>
    </div>
</div>

    <script src="js/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/scripts.js"></script>
  <style type="text/css"> @page { size: auto } </style>
  </body>
</html>

如您所见，横向打印效果很好：

不幸的是，当我尝试纵向打印时，输出结果不太令人信服：

内联 @page { size: auto } 是我根据研究添加的内容 - this question 中推荐了它，但它似乎没有什么区别。有趣的是，虽然我发现了几个与无法横向打印有关的问题，但似乎没有其他人发现纵向布局有问题。

作为一名设计师，我是一个非常好的瓦工，所以虽然软件对我来说完全不是问题，但我发现这些设计问题有时非常曲折。这是怎么回事，我该如何解决？

Answer 1

您需要为印刷媒体写 CSS。

这是一个基于您的代码的基本示例

@media print and (max-width: 767px) {
  .row{
    display: flex;
    flex-direction: row;
  }
  .col-md-3{
    flex-basis: 25%;
  }
  .col-md-1{
    flex-basis: 8.33%;
  }
  .col-md-8{
    flex-basis: 66.67%;
  }
  .col-md-6{
    flex-basis: 50%;
  }
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Bootstrap 4, from LayoutIt! -->
    <title>SPoE Testing</title>

    <meta name="description" content="Source code generated using layoutit.com">
    <meta name="author" content="LayoutIt!">

    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">

  </head>
  <body>
    <div class="container-fluid">
    <div class="row">
        <div class="col-md-3">
        </div>
        <div class="col-md-6">
            <div class="page-header">
                <h1>
                    Integrated Next-Generation Test System
                </h1>
                <hr>
            </div>
        </div>
        <div class="col-md-3">
        </div>
    </div>
    <div class="row">
        <div class="col-md-3">
        </div>
        <div class="col-md-6">
            <div class="page-header">
                <h2>
                    Single PoE <small>Unit 0000000 at 2019-05-23 23:59:59</small>
                </h2>
                <hr>
            </div>
            <div class="row">
                <div class="col-md-4">
                <h3>#0000000</h3>
                </div>
                <div class="col-md-8">
                <h3>pass</h3>
                </div>
            </div>

            <div class="row">
                <div class="col-md-4">
                <h5>Step 1</h5>
                </div>
                <div class="col-md-8">
                <h5>pass</h5>
                </div>
            </div>

            <div class="row">
                <div class="col-md-1"></div>
                <div class="col-md-3">
                power
                </div>
                <div class="col-md-8">
                28.1
                </div>
            </div>

            <div class="row">
                <div class="col-md-1"></div>
                <div class="col-md-3">
                current
                </div>
                <div class="col-md-8">
                525
                </div>
            </div>

            <div class="row">
                <div class="col-md-1"></div>
                <div class="col-md-3">
                voltage
                </div>
                <div class="col-md-8">
                53.7
                </div>
            </div>

        </div>
        <div class="col-md-3">
        </div>
    </div>
</div>

    <script src="js/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/scripts.js"></script>
  <style type="text/css"> @page { size: auto } </style>
  </body>
</html>

Bootstrap 丢失排版打印人像

Bootstrap loses layout printing portrait

html

css

twitter-bootstrap

printing-web-page