如何打印父元素设置visibility:hidden的页面元素？

核心问题是行内样式的优先级高于Bootstrap的打印类，你写的visibility:hidden行内样式会在打印时依然生效，覆盖d-print-block的效果。要实现“屏幕隐藏但占位、打印可见”的需求，可以这样改：

步骤1：添加自定义CSS #

/* 屏幕上隐藏元素，保留布局空间 */
.screen-only-hidden {
  visibility: hidden;
}

/* 打印时恢复元素可见性 */
@media print {
  .screen-only-hidden {
    visibility: visible;
  }
}

步骤2：修改组件代码 #

把行内的visibility: 'hidden'删掉，换成上面的自定义类：

<div
    className="d-print-block mt-2 screen-only-hidden"
    style={{
        alignItems: 'flex-start',
        marginBottom: '1rem'
    }}
>
    <div className="col-12">
        <div>This is hidden but needs to be printed</div>
    </div>
</div>

为什么这样有效 #

• screen-only-hidden类让元素在普通屏幕上不可见，但visibility:hidden会保留元素的占位空间，正好符合你不想用display:none的要求。
• 打印触发时，@media print里的样式会生效，把元素的可见性改回visible，同时Bootstrap的d-print-block确保元素在打印文档里以块级元素布局，两者配合就实现了需求。
• 用类代替行内样式后，媒体查询的样式可以正确覆盖屏幕样式，不会像之前行内样式那样优先级过高无法被覆盖。

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