Laravel项目中Bootstrap的row无法在一行显示两列如何解决

架构老林

2026-10-2

解决方案

问题根源

Bootstrap自带的打印媒体查询默认会覆盖移动端以外的列宽样式，将所有列重置为100%宽度，同时你当前的布局写法混用了自定义flex属性和Bootstrap栅格系统，额外的justify-content-around会挤占列的可用宽度，最终导致两列换行。

具体修复步骤

修正布局结构
将你原有代码中的行容器：

<div class="flex-row d-flex justify-content-around">

替换为标准Bootstrap栅格的row结构，移除多余的flex相关自定义类：

<div class="row gx-2">
<!-- gx-2用来控制两列之间的水平间距，可根据需要调整大小 -->

然后给两个子列的类加上打印专用的宽度控制，两处col-6都要同步修改：

<div class="col-6 col-print-6">

新增打印专属CSS
在你的公共样式文件或者当前页面的style标签中加入以下代码，强制打印场景下的栅格布局生效：

@media print {
  /* 强制打印时row保持flex布局 */
  .row {
    display: flex !important;
    width: 100% !important;
    margin: 0 !important;
  }
  /* 定义打印场景下的6列宽度 */
  .col-print-6 {
    flex: 0 0 50% !important;
    max-width: 50% !important;
    padding: 0 8px !important;
    box-sizing: border-box !important;
  }
  /* 防止表格内容溢出撑宽列 */
  table {
    table-layout: fixed !important;
    word-wrap: break-word !important;
    width: 100% !important;
  }
}

修复异常代码结构

你现有代码中存在一个单独的</page>闭合标签，没有对应的<page>起始标签，这个异常会导致DOM结构解析错误、样式失效，请删除该标签或者补全对应的起始标签。
检查你代码开头的@if条件是否完整，你当前贴出的代码只显示了@else和@endif，缺失的起始条件也可能导致页面结构渲染异常。