我创建了一个包含页眉、页脚和主要内容的页面。主要内容由 Bootstrap 4 卡列表组组成。
我正在尝试制作列表的可打印版本。预期结果是列表元素不会在页面之间中断。但是，page-break-inside: avoid 不起作用并且内容与页脚重叠。
截图及代码如下： 点击查看截图
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;
}
}<!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 …