Bootstrap导航栏响应式异常排查：桌面横向/移动端折叠失效

问题根源 #

1. 导航栏未指定展开断点：原生Bootstrap的navbar默认是折叠状态，必须添加navbar-expand-{断点}类（比如navbar-expand-lg），才能让桌面视口（≥992px）时自动展开导航内容，小于该断点时折叠到汉堡菜单下。
2. 按钮容器强制纵向排列：包裹按钮的div加了flex-column类，直接导致按钮始终垂直排列，和桌面端横向排列的需求冲突。
3. 数据属性不匹配Bootstrap规范：如果用的是原生Bootstrap，切换按钮的data-mdb-toggle/data-mdb-target应该改成data-bs-toggle/data-bs-target；如果是MDB框架则无需修改，但你提到引入Bootstrap，大概率是这里混淆了。
4. 导航项类使用错误：nav-item应该作为单个导航项的容器，而不是直接加在按钮上，不符合Bootstrap导航栏的标准结构。

修复后的完整代码 #

<body>
<!-- Header -->
<header class="header">
    <div class="container">

      <!-- Navbar -->
        <nav class="navbar sticky-top navbar-expand-lg">
          <a href="" class="navbar-brand">
            <img class="huisie-logo" src="./Assets/Home logo with text yellow.svg" height="50" alt="Huisie Logo" loading="lazy">
          </a>
          <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <i class="fas fa-bars"></i>
          </button>
          <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <div class="navbar-nav d-flex flex-row">
              <div class="nav-item m-2">
                <button type="button" class="btn btn-link text-dark px-3 me-auto">
                  Find room
                </button>
              </div>
              <div class="nav-item m-2">
                <button type="button" class="btn btn-link text-dark px-3 me-auto">
                  Make listing
                </button>
              </div>
              <div class="nav-item m-2">
                <button type="button" class="btn btn-link text-dark px-3 me-auto">
                  Sign up
                </button>
              </div>
              <div class="nav-item m-2">
                <button type="button" class="btn btn-link px-3 me-auto text-warning">
                  Log In
                </button>
              </div>
            </div>
          </div>
        </nav>
      <!-- Navbar -->

    </div>
        
</header>
<!-- /Header -->

额外说明 #

• 如果你的项目用的是MDB框架，只需把代码里的data-bs-*改回data-mdb-*即可，其他结构不变。
• navbar-expand-lg中的lg是断点标识，可根据需求换成md（≥768px）、xl（≥1200px）等，控制导航栏展开的最小视口宽度。

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