Bootstrap 3迁移至4后列无法水平对齐的问题求助

嘿，这个问题我太熟了！刚帮同事解决过一模一样的Bootstrap 4迁移坑😎

我帮你梳理几个最可能的原因和对应的解决办法：

1. 嵌套网格缺了内层的row（最常见的坑） #

Bootstrap 4改用Flexbox做网格布局，所有col-*类必须直接放在row容器里才能横向排列。如果你的结构是row -> col-12 -> col-*，内层的col-*因为没被row包裹，会默认变成块级元素，自然就垂直堆在一起了。

举个错误示例：

<!-- 错误：内层col没有套row -->
<div class="row">
  <div class="col-12">
    <div class="col-6">左侧内容</div>
    <div class="col-6">右侧内容</div>
  </div>
</div>

正确写法必须给内层的col加个row包裹：

<!-- 正确：内层col放在row里 -->
<div class="row">
  <div class="col-12">
    <div class="row"> <!-- 这里必须加！ -->
      <div class="col-6">左侧内容</div>
      <div class="col-6">右侧内容</div>
    </div>
  </div>
</div>

2. 类名拼写错误（容易忽略的细节） #

看你贴的代码片段最后是<div clas...，这里明显少了个s，写成clas而不是class！如果真实代码里有这种笔误，浏览器识别不到col-*类，元素自然没法应用网格样式，只能垂直排列。

赶紧检查所有row、col-*的类名拼写，确保没有打错字母。

3. 自定义CSS或第三方样式冲突 #

Bootstrap 4的row默认是display: flex，如果你的项目里有自定义CSS或者第三方插件覆盖了.row的样式（比如设成display: block、float: none），直接就破坏了Flexbox布局，列肯定会垂直排列。

可以打开浏览器开发者工具，选中row元素，看computed样式里的display是不是flex。如果不是，找到冲突的样式，要么删掉，要么用更具体的选择器覆盖（比如.my-page .row { display: flex; }，尽量别用!important，优先调选择器权重）。

4. 浏览器兼容性（现在很少见） #

Bootstrap 4依赖Flexbox，不支持IE9及以下版本。如果你的用户还在用这些旧浏览器，列会因为不支持Flexbox而垂直排列。这种情况可以考虑加Flexbox前缀或者降级方案，但现在大部分场景下已经不用管了。

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