Bootstrap行中右侧列换行至左侧列下方的问题排查

API 探路者

2026-6-28

Bootstrap两列布局滚动断裂问题解决指南

问题根源

这种偶发的布局错位，本质是Bootstrap网格的flex布局逻辑被异常内容或不完整DOM干扰：

左侧列某项目内容突然撑高，导致右侧列被挤到下方
DOM结构不闭合（比如代码中嵌套if分支漏写div闭合标签），浏览器渲染时自动补全引发布局混乱
内容加载时高度计算偏差，滚动触发重排时布局错位

修复步骤

1. 强制列对齐与等高

给父级row添加align-items-start确保顶部对齐，同时给两个列加上h-100强制占满高度，避免因高度差触发换行：

<div class="row align-items-start">
    <div class="col-6 h-100">
        <!-- 左侧匹配项目列表 -->
    </div>
    <div class="col h-100">
        <!-- 右侧未匹配项目列表 -->
    </div>
</div>

2. 修复DOM结构漏洞

代码中多个budget判断分支存在未闭合的div标签（比如project.budget_min > 250的分支只开启了div，没有对应闭合），直接导致DOM树混乱。把嵌套if改成简洁的条件赋值写法，避免标签遗漏：

{% set bg_color = "#f6f1f131" %}
{% if project.budget_min > 10 and project.budget_min <=30 %}
    {% set bg_color = "#ffff0020" %}
{% elif project.budget_min >30 and project.budget_min <=250 %}
    {% set bg_color = "#00ff2620" %}
{% elif project.budget_min >250 %}
    {% set bg_color = "#ff190020" %}
{% endif %}
<div style="background-color: {{ bg_color }};">
    <!-- 项目内容容器 -->
</div>

3. 限制内容溢出

项目描述文本用white-space: pre-wrap可能导致无限制撑高容器，添加最大高度和滚动限制：

<div class="col text-break word-break table-text mb-4 ms-3 me-3" style="white-space: pre-wrap; max-height: 200px; overflow-y: auto;">
    {{ project.description }}
</div>