Bootstrap 5.1.3开发导航菜单时col类未按预期生效问题

问题根因 #

Bootstrap 5栅格系统有严格的层级嵌套要求：container/container-fluid > row > col，三层结构缺一不可。当前代码直接把带col类的两个div平铺，外层没有包裹row类容器，栅格的flex布局规则根本不会触发，col类默认的flex属性不生效，两个div作为普通块级元素自然会上下堆叠，不会按预期左右分栏。
另外如果自定义CSS中给.logo、.menu类写了float、固定width、强制修改display属性的规则，也会覆盖Bootstrap默认的col样式，加剧布局错乱。

修复步骤 #

• 补全栅格嵌套结构，给两个col的外层套上row容器，最外层建议套上container类控制导航栏整体宽度和左右边距
• 调整col类的选型：logo区域用col-auto让宽度自适应内容本身，不会被拉伸；菜单区域用col自动占满剩余宽度
• 菜单项的横向排列可以直接用Bootstrap自带的flex工具类实现，不需要额外写浮动样式，避免破坏栅格
• 检查资源引入顺序：必须先引入Bootstrap 5.1.3的CSS文件，再引入自己的自定义CSS文件，防止样式优先级错乱

修复后参考代码 #

<nav class="container py-3">
  <!-- row是col的直接父容器，align-items-center实现子元素垂直居中 -->
  <div class="row align-items-center">
    <div class="logo col-auto">
      <a href="index.html"><img src="Content/Logo.png" class="logo"/></a>
    </div>
    <div class="menu col">
      <!-- d-flex把ul转成弹性盒，justify-content-end让菜单靠右，gap-4控制菜单项间距，list-unstyled去掉默认列表样式，mb-0去掉默认下边距 -->
      <ul class="d-flex justify-content-end gap-4 list-unstyled mb-0">
        <li><a href="index.html" class="GradientText">Accueil</a></li>
        <li><a href="Views/Portfolio.html" class="GradientText">Portfolio</a></li>
        <li><a href="Views/Contact.html" class="GradientText">Contact</a></li>
      </ul>
    </div>
  </div>
</nav>

额外排查点 #

• 打开浏览器开发者工具检查Bootstrap CSS是否加载成功，有没有出现路径404的问题
• 检查自定义CSS里的.logo、.menu类，删除float: left/right、width: 100%这类会干扰flex布局的属性
• 如果需要给logo设置固定尺寸，直接给.logo类下的img标签设置宽高即可，col-auto会自动适配内容宽度，不会打乱栅格计算

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