为什么生成的Bootstrap列无法相邻并排正常显示？

栅格无法并排的核心原因 #

• DOM嵌套结构被错误的img标签写法彻底破坏（直接诱因）
  Bootstrap 4 栅格生效的硬性规则：所有带.col-md-*类的栅格列，必须是.row元素的直接子元素——因为.row默认是display: flex弹性容器，只有直接子元素才能触发横向并排的布局逻辑。
  原代码里第一列的img标签存在明显语法错误：

  <img src="images/solobee-card.png" </div>
  

  该img标签缺少闭合的>，浏览器解析时会把后续的</div>、甚至下一个<div class="col-md-9">的开标签内容都错误识别为img标签的属性，直接打乱DOM层级：原本应该作为row直接子元素的三个列，要么被提前错误闭合，要么脱离row的直接子元素层级，自然无法触发栅格的flex并排效果。
• 使用了不存在的官方类名
  Bootstrap 4 官方仅提供两类容器类：固定响应式宽度的container、100%宽度的通栏容器container-fluid，不存在container-flex这个预设类，该类不会加载任何官方样式。

修正后的可正常运行的代码 #

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<div class="container-fluid border rounded">
  <div class="row">
    <div class="col-md-1">
      <img src="images/solobee-card.png" alt="卡片图标">
    </div>
    <div class="col-md-9">
      s
    </div>
    <div class="col-md-2">
      s
    </div>
  </div>
</div>

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