Question

我创建了一个包含页眉，页脚和主要内容的页面。主要内容包括Bootstrap 4卡列表组。

我正在尝试制作列表的可打印版本。预期结果是列表元素不会在页面之间中断。但是，page-break-inside：avoid不起作用，内容与页脚重叠。

＆＃13;

header {
  width: 100%;
  position: fixed;
  top: 0;
}

footer {
  width: 100%;
  position: fixed;
  bottom: 0;
}

main {
  padding-top: 24pt;
  padding-bottom: 48pt;
}

@media print {
  li {
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
    break-inside: avoid;
  }
}

＆＃13;

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Bootstrap 4 Card</title>

  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">

  <link rel="stylesheet" href="script.css">
</head>

<body>
  <header>Header</header>
  <main class="container">
    <div class="card">
      <ul class="list-group list-group-flush">
        <li class="list-group-item">
          <h5 class="card-title">Title </h5>
          <table class="table table-sm table-bordered">
            <tbody>
              <tr>
                <th>Field</th>
                <td>Value</td>
              </tr>
              <tr>
                <th>Field</th>
                <td>Value</td>
              </tr>
              <tr>
                <th>Field</th>
                <td>Value</td>
              </tr>
              <tr>
                <th>Field</th>
                <td>Value</td>
              </tr>
              <tr>
                <th>Field</th>
                <td>Value</td>
              </tr>
            </tbody>
          </table>
        </li>
        <li class="list-group-item">
          <h5 class="card-title">Title </h5>
          <table class="table table-sm table-bordered">
            <tbody>
              <tr>
                <th>Field</th>
                <td>Value</td>
              </tr>
              <tr>
                <th>Field</th>
                <td>Value</td>
              </tr>
              <tr>
                <th>Field</th>
                <td>Value</td>
              </tr>
              <tr>
                <th>Field</th>
                <td>Value</td>
              </tr>
              <tr>
                <th>Field</th>
                <td>Value</td>
              </tr>
            </tbody>
          </table>
        </li>
        <li class="list-group-item">
          <h5 class="card-title">Title </h5>
          <table class="table table-sm table-bordered">
            <tbody>
              <tr>
                <th>Field</th>
                <td>Value</td>
              </tr>
              <tr>
                <th>Field</th>
                <td>Value</td>
              </tr>
              <tr>
                <th>Field</th>
                <td>Value</td>
              </tr>
              <tr>
                <th>Field</th>
                <td>Value</td>
              </tr>
              <tr>
                <th>Field</th>
                <td>Value</td>
              </tr>
            </tbody>
          </table>
        </li>
        <li class="list-group-item">
          <h5 class="card-title">Title </h5>
          <table class="table table-sm table-bordered">
            <tbody>
              <tr>
                <th>Field</th>
                <td>Value</td>
              </tr>
              <tr>
                <th>Field</th>
                <td>Value</td>
              </tr>
              <tr>
                <th>Field</th>
                <td>Value</td>
              </tr>
              <tr>
                <th>Field</th>
                <td>Value</td>
              </tr>
              <tr>
                <th>Field</th>
                <td>Value</td>
              </tr>
            </tbody>
          </table>
        </li>
        <li class="list-group-item">
          <h5 class="card-title">Title </h5>
          <table class="table table-sm table-bordered">
            <tbody>
              <tr>
                <th>Field</th>
                <td>Value</td>
              </tr>
              <tr>
                <th>Field</th>
                <td>Value</td>
              </tr>
              <tr>
                <th>Field</th>
                <td>Value</td>
              </tr>
              <tr>
                <th>Field</th>
                <td>Value</td>
              </tr>
              <tr>
                <th>Field</th>
                <td>Value</td>
              </tr>
            </tbody>
          </table>
        </li>
      </ul>
    </div>
  </main>
  <footer>Footer</footer>
</body>

</html>

＆＃13;

Answer 1

我最近遇到了类似的问题。事实证明display:flex;与Chrome的打印布局不太匹配。在我的情况下，它是一个列表组，Bootstrap有.list-group {display: flex; }所以修复我设置简单使用：

@media print {
  .list-group {
     display: block;
  }
}

然后list-group-item {page-break-inside: avoid; }以避免列表项内的分页！

无序列表页面 - 内部：避免不工作并与页脚重叠

1 个答案: