标签打印机CSS适配问题：多页打印布局错乱求助

针对你遇到的第一页打印正常、第二页布局错乱的问题，核心原因是Bootstrap默认的row/col边距、内边距和打印分页逻辑冲突，且未精确匹配物理标签的尺寸。以下是直接可行的修复方案：

核心修复思路 #

1. 抛弃Bootstrap自带的row/col默认样式，自定义精确匹配标签尺寸的容器类
2. 在打印样式中强制控制分页规则，避免标签被跨页拆分
3. 用物理单位（英寸）定义标签尺寸，确保和实际标签纸完全对齐

修改后的代码实现 #

自定义CSS样式（含打印专属规则） #

/* 基础字体样式 */
.smaller-font {
  font-size: 11pt !important;
}

/* 标签容器：精确匹配打印纸尺寸 */
.label-container {
  width: 100%;
  padding: 0;
  margin: 0;
}

/* 标签行：禁止跨页拆分，确保一行2个标签 */
.label-row {
  display: flex;
  flex-wrap: nowrap;
  margin: 0;
  padding: 0;
  page-break-inside: avoid; /* 关键：防止整行标签被分页拆分 */
}

/* 标签列：严格匹配1 1/3"×4"的物理尺寸 */
.label-col {
  width: calc(50% - 0.5rem); /* 2列布局，预留0.5rem的列间距 */
  margin: 0.25rem;
  padding: 0.5rem;
  box-sizing: border-box;
  height: 4in; /* 标签高度4英寸 */
  overflow: hidden; /* 防止地址内容溢出标签 */
}

/* 打印专属样式重置 */
@media print {
  body {
    margin: 0 !important;
    padding: 0 !important;
  }

  .label-container {
    width: 8.5in; /* 美国信纸宽度 */
    margin: auto;
    padding: 0.67in 0.5in; /* 匹配标签纸的左右上边距，1 1/3"≈0.67in */
  }

  /* 强制打印页面尺寸和边距 */
  @page {
    size: letter;
    margin: 0;
  }

  /* 隐藏所有非打印元素（如果有） */
  .no-print {
    display: none !important;
  }
}

调整PHP生成的HTML结构 #

替换原有的Bootstraprow/col为自定义类，避免默认样式干扰：

echo '<div class="label-container smaller-font">';
foreach ($table_dt as $count => $data) {
    // 每2个标签开启一行
    if ($count % 2 == 0) {
        echo '<div class="label-row">';
    }

    // 地址和收件人逻辑保持不变
    if ($mode === "status") {
        $address = $data['address'];
        $subject = $data['name'];
    } elseif ($mode === "cont_lbl") {
        $address = $data['address'];
        $subject = $data['contractor'];
    }
    // 用nl2br替代手动替换换行，更可靠
    $formated_address = nl2br($address);

    // 输出单个标签内容
    echo '<div class="label-col">
            <p>' . $subject . '<br>' . $formated_address . '</p>
          </div>';

    // 每2个标签结束一行，或最后一行强制闭合
    if ($count % 2 != 0 || $count == array_key_last($table_dt)) {
        echo '</div>';
    }
}
echo '</div>';

关键说明 #

• page-break-inside: avoid：彻底解决第二页因跨页拆分row导致的布局错乱
• 用英寸（in）定义标签尺寸：确保和物理标签的1 1/3"×4"完全匹配
• 自定义容器类：规避Bootstraprow/col自带的gx-5、mb-4等边距属性对打印布局的干扰

内容的提问来源于stack exchange，提问作者answerSeeker