如何实现div元素并排显示？Bootstrap pull-left类无效如何解决

你使用的是Bootstrap 5版本，旧版Bootstrap 3的pull-left浮动类已经被官方弃用，因此不会生效。用Bootstrap自带的Flex布局工具实现需求最稳妥，既适配响应式，也不会出现浮动导致的高度塌陷问题。

修改后的导航栏代码 #

<nav id="header-nav" class="navbar navbar-light">
  <div class="container-fluid d-flex align-items-center">
    <!-- Logo区域 -->
    <a href="restaurant.html">
      <img id="logo-img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/85/Burger_King_logo_%281999%29.svg/640px-Burger_King_logo_%281999%29.svg.png" alt="burger king" class="d-inline-block align-text-top">
    </a>
    <!-- 品牌文本区域 -->
    <div class="navbar-brand ms-3">
      <a href="restaurant.html">
        <h1>Burger King</h1>
      </a>
    </div>
  </div>
</nav>

核心修改点 #

• 移除了冗余的navbar-header外层容器，以及已经失效的pull-left类
• 给导航栏的container-fluid添加d-flex、align-items-center类，开启flex布局的同时让logo和文本垂直方向居中对齐
• 给navbar-brand添加ms-3类设置左侧外边距，拉开和logo的间距，视觉效果更协调

如果你需要调整垂直对齐规则，可以将align-items-center替换为align-items-start（顶部对齐）或align-items-end（底部对齐）按需调整即可。

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