Question

我正在使用下面发布的html 当我打印（或打印预览）时，人员div框正确地在第1页上对齐，但在所有后续页面上，第一个人div框关闭到左侧。

看起来如果我删除了page-break-inside：避免从css中消失但是然后在分页符上打破了框，我想避免这种情况。

我做错了什么？

＆＃13;

        System.out.println("\nChange Owed: $" +amountOwed++);

＆＃13;

.person-box {
  border: 1px solid #000000;
  padding: 10px;
  margin-bottom: 10px;
  margin-left: 10px;
  cursor: pointer;
  page-break-inside: avoid;
}
.FieldName {
  font-weight: bold;
  padding: 5px;
  /*border-bottom: 1px solid black;*/
}
.application-mugshot img {
  height: 105px;
  width: 105px;
}
span.application-name {
  display: block;
  font-weight: bold;
  font-size: larger;
}
span.application-address,
span.application-phone,
span.application-email {
  display: block;
}

＆＃13;

这是一个zip文件，可以在打印预览中下载并在本地运行以重现问题： https://www.dropbox.com/s/t9n0cy06rdo1zt8/PrintProblem.zip?dl=0

Answer 1

引导网格模型不能像您在文档中看到的那样实现它（http://getbootstrap.com/css/#grid）

它始终是结构：

<div class="row">
  <div class="col-xs-6"></div>
  <div class="col-xs-6"></div>
</div>
<div class="row">
  <div class="col-xs-2"></div>
  <div class="col-xs-8"></div>
  <div class="col-xs-2"></div>
</div>
//and so on

你总是需要达到＆＃34; 12＆＃34;每行都有你的colums。在我的例子中，它是1）6 + 6 = 12和2）2 + 8 + 2 = 12。你的列类需要填写12.希望它有所帮助

使用CSS＆amp ;;打印网页Bootstrap - 关闭第二页边距

1 个答案: