使用DomPdf时Bootstrap栅格系统无法正常显示问题

Dompdf对Bootstrap响应式布局的支持存在局限性，尤其是col系列类在PDF渲染时经常无法生效，可尝试以下几种针对性方案：

方案1：用内联CSS替代Bootstrap类 #

直接给表格设置行内样式，跳过Bootstrap的col类：

<div style="width: 100%; white-space: nowrap;">
    <table style="display: inline-table; width: 48%; margin-right: 2%;">
        <!-- 表格内容 -->
    </table>
    <table style="display: inline-table; width: 48%;">
        <!-- 表格内容 -->
    </table>
</div>

外层容器的white-space: nowrap可强制表格不换行，宽度比例可根据需求调整。

方案2：自定义适配Dompdf的CSS #

针对PDF渲染写专属样式，覆盖Bootstrap的默认规则：

@media print {
    .pdf-inline-table {
        display: inline-table !important;
        width: 49% !important;
        float: left;
        margin-right: 2%;
    }
    .pdf-inline-table:last-child {
        margin-right: 0;
    }
}

给需要同行的表格添加pdf-inline-table类，确保Dompdf加载了该自定义样式文件。

方案3：开启Dompdf的高级渲染支持 #

在Laravel的config/dompdf.php配置文件中启用相关选项，提升对HTML5和CSS3的支持：

return [
    'enable_html5_parser' => true,
    'enable_css_float' => true,
    'enable_remote' => true, // 若需加载外部样式文件需开启
];

开启enable_css_float后，可配合Bootstrap的浮动类使用，但需注意清除浮动避免布局错乱。

方案4：使用Flex布局包裹表格 #

Dompdf对flex布局的支持优于Bootstrap的grid系统，直接用flex实现同行：

<div style="display: flex; gap: 1rem; width: 100%;">
    <table style="flex: 1;">
        <!-- 表格内容 -->
    </table>
    <table style="flex: 1;">
        <!-- 表格内容 -->
    </table>
</div>

这种方式能让两个表格自动平分容器宽度，且在PDF中稳定保持同行。

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