Dompdf 将 html bootstrap 代码打印为 col-sm-x 而不是 col-lg-x

Question

我在 PHP 中使用 Dompdf 以打印 PDF 格式的报告。我不知道如何按照我在屏幕上看到的方式打印 HTML bootstrap 代码。例如，您知道如果设备较小，bootstrap 网格会折叠。在这种情况下，在我的 PDF 中，网格看起来好像在手机或 table 中，如 col-xs-x 或 col-sm-x 而不是 col-lg-x。有没有办法在 Dompdf 中指定视图应该看起来像 col-lg-x?

这是示例 html bootstrap 代码：

$content2='<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <div class="jumbotron">
    <h1>My First Bootstrap Page</h1>
    <p>Resize this responsive page to see the effect!</p>
  </div>
  <div class="row">
    <div class="col-sm-4 col-md-4 col-lg-4">
      <h3>Column 1</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
    </div>
    <div class="col-sm-4 col-md-4 col-lg-4">
      <h3>Column 2</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
    </div>
    <div class="col-sm-4 col-md-4 col-lg-4">
      <h3>Column 3</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
    </div>
  </div>
</div>

</body>
</html>';

这是代码的其余部分：

$pdf = new Dompdf();
$pdf->loadHtml($content2);
$pdf->render();
$pdf->stream();

例如，在我的屏幕中，列 <h3>Column 1</h3>、<h3>Column 2</h3> 和 <h3>Column 3</h3> 出现在同一行中。但在 pdf 中，它们分别出现在不同的行中（折叠为 col-xs-x）。有一个连续。而不是一排三个 -> 正如我想要的那样 (example here)。

Answer 1

一些注意事项：col-sm-4 col-md-4 col-lg-4

可以简化为col-sm-4

您遇到的主要问题是 PDF 转换器基本上是针对打印屏幕进行转换。打印的最大宽度比浏览器小得多。

您可以试试 col-xs-4

Answer 2

尝试为您的网格布局使用表格。非常适合我

.td-25{
    width: 25%;
}
.td-50{
    width: 50%;
}
.td-100{
    width: 100%;
}

<div class="container">
    <div class="jumbotron">
        <h1>My First Bootstrap Page</h1>
        <p>Resize this responsive page to see the effect!</p>
    </div>
    <table class="table-borderless">
        <tbody>
            <!-- tr represents .row and td represents .col -->
            <tr>
                <td class="td-25">
                    <h3>Column 4</h3>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
                    <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
                </td>
                <td class="td-25">
                    <h3>Column 4</h3>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
                    <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
                </td>
                <td class="td-25">
                    <h3>Column 4</h3>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
                    <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
                </td>
                <td class="td-25">
                    <h3>Column 4</h3>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
                    <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
                </td>
            </tr>
        </tbody>
    </table>
</div>

Dompdf 将 html bootstrap 代码打印为 col-sm-x 而不是 col-lg-x

Dompdf prints html bootstrap code as col-sm-x and not as col-lg-x

html

dompdf

twitter-bootstrap