【发布时间】：2022-10-19 10:29:49
【问题描述】：
我正在处理这段代码一段时间，到目前为止还没有找到解决方案。 打印时我从 vuejs 获取此代码。我的问题是避免分页符，或者如果可能的话，在学生 #12 之后插入分页符，就像我在代码中尝试的那样。您可以在下面找到代码：
<!DOCTYPE html>
<html>
<head>
<style>
.container {
width: 100%;
padding: 12px;
margin-right: auto;
margin-left: auto;
height: 100%;
}
@media (min-width: 960px) {
.container {
max-width: 900px;
}
}
@media (min-width: 1264px) {
.container {
max-width: 1185px;
}
}
@media (min-width: 1904px) {
.container {
max-width: 1785px;
}
}
.row {
display: flex;
flex-wrap: wrap;
flex: 1 1 auto;
margin-right: -12px;
margin-left: -12px;
}
.container.fill-height > .row {
flex: 1 1 100%;
max-width: calc(100% + 24px);
}
.v-avatar {
align-items: center;
border-radius: 50%;
display: inline-flex;
justify-content: center;
line-height: normal;
position: relative;
text-align: center;
vertical-align: middle;
overflow: hidden;
}
.v-avatar img,
.v-avatar svg,
.v-avatar .v-icon,
.v-avatar .v-image,
.v-avatar .v-responsive__content {
border-radius: inherit;
display: inline-flex;
height: inherit;
width: inherit;
}
.v-image {
z-index: 0;
}
.v-responsive {
position: relative;
overflow: hidden;
flex: 1 0 auto;
max-width: 100%;
display: flex;
}
.v-responsive__sizer {
transition: padding-bottom 0.2s cubic-bezier(0.25, 0.8, 0.5, 1);
flex: 1 0 0px;
}
.v-image__image {
background-repeat: no-repeat;
}
.v-image__image, .v-image__placeholder {
z-index: -1;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.v-image__image--cover {
background-size: cover;
}
.v-responsive__content {
flex: 1 0 0px;
max-width: 100%;
}
.col-12 {
width: 100%;
padding: 12px;
}
.col-4 {
flex: 0 0 33.3333333333%;
max-width: 33.3333333333%;
}
@media print {
p {
page-break-after: always;
}
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col col-12">
<div>
<center>
<h1>Equipe KIDS</h1>
</center>
</div>
</div>
</div>
<div class="row">
<div class="col col-4">
<center>
<div class="v-avatar" style="height: 96px; min-width: 96px; width: 96px;">
<div class="v-image v-responsive theme--light">
<div class="v-responsive__sizer" style="padding-bottom: 100%;"></div>
<div class="v-image__image v-image__image--cover" style="background-image: url("https://s3.amazonaws.com/dev.static.cisv-sp.org.br/fotos/nofoto.jpg"); background-position: center center;"></div>
<div class="v-responsive__content" style="width: 400px;"></div>
</div>
</div>
<br>
<h5><b>nome</b><br>
21/01/2012<br>
escola
</h5>
</center>
</div>
<div class="col col-4">
<center>
<div class="v-avatar" style="height: 96px; min-width: 96px; width: 96px;">
<div class="v-image v-responsive theme--light">
<div class="v-responsive__sizer" style="padding-bottom: 100%;"></div>
<div class="v-image__image v-image__image--cover" style="background-image: url("https://s3.amazonaws.com/dev.static.cisv-sp.org.br/fotos/nofoto.jpg"); background-position: center center;"></div>
<div class="v-responsive__content" style="width: 400px;"></div>
</div>
</div>
<br>
<h5><b>nome</b><br>
21/01/2012<br>
escola
</h5>
</center>
</div>
<div class="col col-4">
<center>
<div class="v-avatar" style="height: 96px; min-width: 96px; width: 96px;">
<div class="v-image v-responsive theme--light">
<div class="v-responsive__sizer" style="padding-bottom: 100%;"></div>
<div class="v-image__image v-image__image--cover" style="background-image: url("https://s3.amazonaws.com/dev.static.cisv-sp.org.br/fotos/nofoto.jpg"); background-position: center center;"></div>
<div class="v-responsive__content" style="width: 400px;"></div>
</div>
</div>
<br>
<h5><b>nome</b><br>
21/01/2012<br>
escola
</h5>
</center>
</div>
<div class="col col-4">
<center>
<div class="v-avatar" style="height: 96px; min-width: 96px; width: 96px;">
<div class="v-image v-responsive theme--light">
<div class="v-responsive__sizer" style="padding-bottom: 100%;"></div>
<div class="v-image__image v-image__image--cover" style="background-image: url("https://s3.amazonaws.com/dev.static.cisv-sp.org.br/fotos/nofoto.jpg"); background-position: center center;"></div>
<div class="v-responsive__content" style="width: 400px;"></div>
</div>
</div>
<br>
<h5><b>nome</b><br>
21/01/2012<br>
escola
</h5>
</center>
</div>
<div class="col col-4">
<center>
<div class="v-avatar" style="height: 96px; min-width: 96px; width: 96px;">
<div class="v-image v-responsive theme--light">
<div class="v-responsive__sizer" style="padding-bottom: 100%;"></div>
<div class="v-image__image v-image__image--cover" style="background-image: url("https://s3.amazonaws.com/dev.static.cisv-sp.org.br/fotos/nofoto.jpg"); background-position: center center;"></div>
<div class="v-responsive__content" style="width: 400px;"></div>
</div>
</div>
<br>
<h5><b>nome</b><br>
21/01/2012<br>
escola
</h5>
</center>
</div>
<div class="col col-4">
<center>
<div class="v-avatar" style="height: 96px; min-width: 96px; width: 96px;">
<div class="v-image v-responsive theme--light">
<div class="v-responsive__sizer" style="padding-bottom: 100%;"></div>
<div class="v-image__image v-image__image--cover" style="background-image: url("https://s3.amazonaws.com/dev.static.cisv-sp.org.br/fotos/nofoto.jpg"); background-position: center center;"></div>
<div class="v-responsive__content" style="width: 400px;"></div>
</div>
</div>
<br>
<h5><b>nome</b><br>
21/01/2012<br>
escola
</h5>
</center>
</div>
<div class="col col-4">
<center>
<div class="v-avatar" style="height: 96px; min-width: 96px; width: 96px;">
<div class="v-image v-responsive theme--light">
<div class="v-responsive__sizer" style="padding-bottom: 100%;"></div>
<div class="v-image__image v-image__image--cover" style="background-image: url("https://s3.amazonaws.com/dev.static.cisv-sp.org.br/fotos/nofoto.jpg"); background-position: center center;"></div>
<div class="v-responsive__content" style="width: 400px;"></div>
</div>
</div>
<br>
<h5><b>nome</b><br>
21/01/2012<br>
escola
</h5>
</center>
</div>
<div class="col col-4">
<center>
<div class="v-avatar" style="height: 96px; min-width: 96px; width: 96px;">
<div class="v-image v-responsive theme--light">
<div class="v-responsive__sizer" style="padding-bottom: 100%;"></div>
<div class="v-image__image v-image__image--cover" style="background-image: url("https://s3.amazonaws.com/dev.static.cisv-sp.org.br/fotos/nofoto.jpg"); background-position: center center;"></div>
<div class="v-responsive__content" style="width: 400px;"></div>
</div>
</div>
<br>
<h5><b>nome</b><br>
21/01/2012<br>
escola
</h5>
</center>
</div>
<div class="col col-4">
<center>
<div class="v-avatar" style="height: 96px; min-width: 96px; width: 96px;">
<div class="v-image v-responsive theme--light">
<div class="v-responsive__sizer" style="padding-bottom: 100%;"></div>
<div class="v-image__image v-image__image--cover" style="background-image: url("https://s3.amazonaws.com/dev.static.cisv-sp.org.br/fotos/nofoto.jpg"); background-position: center center;"></div>
<div class="v-responsive__content" style="width: 400px;"></div>
</div>
</div>
<br>
<h5><b>nome</b><br>
21/01/2012<br>
escola
</h5>
</center>
</div>
<div class="col col-4">
<center>
<div class="v-avatar" style="height: 96px; min-width: 96px; width: 96px;">
<div class="v-image v-responsive theme--light">
<div class="v-responsive__sizer" style="padding-bottom: 100%;"></div>
<div class="v-image__image v-image__image--cover" style="background-image: url("https://s3.amazonaws.com/dev.static.cisv-sp.org.br/fotos/nofoto.jpg"); background-position: center center;"></div>
<div class="v-responsive__content" style="width: 400px;"></div>
</div>
</div>
<br>
<h5><b>nome</b><br>
21/01/2012<br>
escola
</h5>
</center>
</div>
<div class="col col-4">
<center>
<div class="v-avatar" style="height: 96px; min-width: 96px; width: 96px;">
<div class="v-image v-responsive theme--light">
<div class="v-responsive__sizer" style="padding-bottom: 100%;"></div>
<div class="v-image__image v-image__image--cover" style="background-image: url("https://s3.amazonaws.com/dev.static.cisv-sp.org.br/fotos/nofoto.jpg"); background-position: center center;"></div>
<div class="v-responsive__content" style="width: 400px;"></div>
</div>
</div>
<br>
<h5><b>nome</b><br>
21/01/2012<br>
escola
</h5>
</center>
</div>
<div class="col col-4">
<center>
<div class="v-avatar" style="height: 96px; min-width: 96px; width: 96px;">
<div class="v-image v-responsive theme--light">
<div class="v-responsive__sizer" style="padding-bottom: 100%;"></div>
<div class="v-image__image v-image__image--cover" style="background-image: url("https://s3.amazonaws.com/dev.static.cisv-sp.org.br/fotos/nofoto.jpg"); background-position: center center;"></div>
<div class="v-responsive__content" style="width: 400px;"></div>
</div>
</div>
<br>
<h5><b>nome - 12</b><br>
21/01/2012<br>
escola
</h5>
</center>
</div>
<p></p>
<div class="col col-4">
<center>
<div class="v-avatar" style="height: 96px; min-width: 96px; width: 96px;">
<div class="v-image v-responsive theme--light">
<div class="v-responsive__sizer" style="padding-bottom: 100%;"></div>
<div class="v-image__image v-image__image--cover" style="background-image: url("https://s3.amazonaws.com/dev.static.cisv-sp.org.br/fotos/nofoto.jpg"); background-position: center center;"></div>
<div class="v-responsive__content" style="width: 400px;"></div>
</div>
</div>
<br>
<h5><b>nome</b><br>
21/01/2012<br>
escola
</h5>
</center>
</div>
<div class="col col-4">
<center>
<div class="v-avatar" style="height: 96px; min-width: 96px; width: 96px;">
<div class="v-image v-responsive theme--light">
<div class="v-responsive__sizer" style="padding-bottom: 100%;"></div>
<div class="v-image__image v-image__image--cover" style="background-image: url("https://s3.amazonaws.com/dev.static.cisv-sp.org.br/fotos/nofoto.jpg"); background-position: center center;"></div>
<div class="v-responsive__content" style="width: 400px;"></div>
</div>
</div>
<br>
<h5><b>nome</b><br>
21/01/2012<br>
escola
</h5>
</center>
</div>
<div class="col col-4">
<center>
<div class="v-avatar" style="height: 96px; min-width: 96px; width: 96px;">
<div class="v-image v-responsive theme--light">
<div class="v-responsive__sizer" style="padding-bottom: 100%;"></div>
<div class="v-image__image v-image__image--cover" style="background-image: url("https://s3.amazonaws.com/dev.static.cisv-sp.org.br/fotos/nofoto.jpg"); background-position: center center;"></div>
<div class="v-responsive__content" style="width: 400px;"></div>
</div>
</div>
<br>
<h5><b>nome</b><br>
21/01/2012<br>
escola
</h5>
</center>
</div>
<div class="col col-4">
<center>
<div class="v-avatar" style="height: 96px; min-width: 96px; width: 96px;">
<div class="v-image v-responsive theme--light">
<div class="v-responsive__sizer" style="padding-bottom: 100%;"></div>
<div class="v-image__image v-image__image--cover" style="background-image: url("https://s3.amazonaws.com/dev.static.cisv-sp.org.br/fotos/nofoto.jpg"); background-position: center center;"></div>
<div class="v-responsive__content" style="width: 400px;"></div>
</div>
</div>
<br>
<h5><b>nome</b><br>
21/01/2012<br>
escola
</h5>
</center>
</div>
<div class="col col-4">
<center>
<div class="v-avatar" style="height: 96px; min-width: 96px; width: 96px;">
<div class="v-image v-responsive theme--light">
<div class="v-responsive__sizer" style="padding-bottom: 100%;"></div>
<div class="v-image__image v-image__image--cover" style="background-image: url("https://s3.amazonaws.com/dev.static.cisv-sp.org.br/fotos/nofoto.jpg"); background-position: center center;"></div>
<div class="v-responsive__content" style="width: 400px;"></div>
</div>
</div>
<br>
<h5><b>nome</b><br>
21/01/2012<br>
escola
</h5>
</center>
</div>
<div class="col col-4">
<center>
<div class="v-avatar" style="height: 96px; min-width: 96px; width: 96px;">
<div class="v-image v-responsive theme--light">
<div class="v-responsive__sizer" style="padding-bottom: 100%;"></div>
<div class="v-image__image v-image__image--cover" style="background-image: url("https://s3.amazonaws.com/dev.static.cisv-sp.org.br/fotos/nofoto.jpg"); background-position: center center;"></div>
<div class="v-responsive__content" style="width: 400px;"></div>
</div>
</div>
<br>
<h5><b>nome</b><br>
21/01/2012<br>
escola
</h5>
</center>
</div>
<div class="col col-4">
<center>
<div class="v-avatar" style="height: 96px; min-width: 96px; width: 96px;">
<div class="v-image v-responsive theme--light">
<div class="v-responsive__sizer" style="padding-bottom: 100%;"></div>
<div class="v-image__image v-image__image--cover" style="background-image: url("https://s3.amazonaws.com/dev.static.cisv-sp.org.br/fotos/nofoto.jpg"); background-position: center center;"></div>
<div class="v-responsive__content" style="width: 400px;"></div>
</div>
</div>
<br>
<h5><b>nome</b><br>
21/01/2012<br>
escola
</h5>
</center>
</div>
<div class="col col-4">
<center>
<div class="v-avatar" style="height: 96px; min-width: 96px; width: 96px;">
<div class="v-image v-responsive theme--light">
<div class="v-responsive__sizer" style="padding-bottom: 100%;"></div>
<div class="v-image__image v-image__image--cover" style="background-image: url("https://s3.amazonaws.com/dev.static.cisv-sp.org.br/fotos/nofoto.jpg"); background-position: center center;"></div>
<div class="v-responsive__content" style="width: 400px;"></div>
</div>
</div>
<br>
<h5><b>nome</b><br>
21/01/2012<br>
escola
</h5>
</center>
</div>
</div>
</div>
</body>
</html>我试图避免以下行为：
已经用@media print 玩了很多，所有元素都显示：块，但似乎没有什么可以解决它。 有任何想法吗？ 干杯
金斯
【问题讨论】：
标签： css twitter-bootstrap printing row page-break