Bootstrap结合Ajax与SQL时Div列无法对齐的技术问题

核心问题分析 #

你遇到的每个col-3单独成行的问题，主要是**mx-auto类破坏了Bootstrap栅格布局规则**，同时需确保Ajax加载的内容结构严格符合栅格要求。

具体解决方案 #

1. 移除mx-auto类
   mx-auto会强制列元素左右自动居中，占据整行可用空间，直接导致列无法并排。修改PHP循环代码：

echo '<div class="border box col-3 m-1 p-2 rounded text-center">';
echo '&nbsp;&nbsp;<span>'. $row['post_title'] .'</span>&nbsp;&nbsp;<br />';
echo '<span class="small">'. $row['post_description'] .'<br />'. $row['post_author'] .'</span>';
echo '</div>';

2. 确认Ajax内容的追加目标
   确保返回的列元素直接追加到row容器内，禁止嵌套额外容器。示例JS代码：

$(window).scroll(function(){
    if($(window).scrollTop() === $(document).height() - $(window).height()){
        // 替换为你实际的row选择器，比如#content-row
        $('#content-row').append(data);
    }
});

3. 检查DOM结构有效性
   用浏览器开发者工具查看加载后的DOM，确认：

• 所有col-3都是row的直接子元素
• 没有多余的换行、文本节点或无关标签包裹列元素

4. 可选：优化间距避免溢出
   若m-1导致列总宽度超过100%，可改用Bootstrap内置的行间隙类g-*替代列的margin：

<div class="container">
    <div class="row g-2" id="content-row">
        <!-- 初始内容与Ajax加载的col-3均放在这里 -->
    </div>
</div>

此时PHP代码中的列可移除m-1，避免重复间距。

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