Bootstrap 4 列垂直堆叠而非水平排列问题求助

嘿，我来帮你搞定这个切换到Bootstrap 4后列不对齐的问题！

你现在遇到的核心问题是栅格结构不符合Bootstrap 4的规则——Bootstrap的栅格系统要求严格的层级：.container → .row → .col-*，列必须是.row的直接子元素，不能在中间插入像.skillsbox这样的自定义容器，不然栅格的布局逻辑（比如row的负margin、col的padding）就会被破坏，列自然没法水平排列。

给你调整后的正确代码：

<div class="container">
  <div class="row">
    <!-- 把自定义样式容器放到列内部 -->
    <div class="col-2">
      <div class="skillsbox hvr-wobble-skew">
        <h4>HTML 5</h4>
        <img src="img/html5.png">
      </div>
    </div>
    <div class="col-2">
      <div class="skillsbox hvr-wobble-skew">
        <h4>@Southern Utah Uni...</h4>
      </div>
    </div>
  </div>
</div>

简单说下调整逻辑：

• 把.skillsbox移到.col-2内部，让列直接成为.row的子元素，这样Bootstrap的栅格布局就能正常生效，两列就会水平对齐在一行里了。
• 如果你的.skillsbox是要给整个行的内容加样式，也可以把它加到.row上，但要注意不要覆盖栅格的默认样式，相对来说把样式容器放在列内部更稳妥。

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