Bootstrap网站小屏模式下Logo与导航堆叠问题求助

使用Bootstrap搭建网站时，常规、中等及大屏尺寸下Logo与导航栏排列整齐；但缩小至小屏模式时，二者出现堆叠现象。

相关代码：

<div class="container-fluid hero-section">
  <div class="row align-items-center">
    <div class="col-sm-2">
      <a><img class="logo" src="assets/logo.png" alt="Pangu Logo"></a>
    </div>
    <div class="col-sm-10">
      <nav class="nav nav-pills nav-fill justify-content-end">
        <a class="nav-link active" aria-current="page" href="#">HOME</a>
        <a class="nav-link" href="#">PROJECTS</a>
        <a class="nav-link" href="#">ABOUT</a>
        <a class="nav-link" href="#">TEAM</a>
        <a class="nav-link" href="#">CONTACT</a>
      </nav>
    </div>
  </div>
</div>

方案1：小屏保持并排布局 #

当前代码用col-sm-*，意味着屏幕宽度小于576px时列会自动堆叠。若想小屏也保持并排，把列断点改成无前缀的col-*（适配所有尺寸）：

<div class="container-fluid hero-section">
  <div class="row align-items-center">
    <div class="col-2">
      <a><img class="logo" src="assets/logo.png" alt="Pangu Logo"></a>
    </div>
    <div class="col-10">
      <nav class="nav nav-pills nav-fill justify-content-end">
        <a class="nav-link active" aria-current="page" href="#">HOME</a>
        <a class="nav-link" href="#">PROJECTS</a>
        <a class="nav-link" href="#">ABOUT</a>
        <a class="nav-link" href="#">TEAM</a>
        <a class="nav-link" href="#">CONTACT</a>
      </nav>
    </div>
  </div>
</div>

注意：如果小屏空间不足，导航项可能挤压或换行，这种情况更推荐方案2。

方案2：使用Bootstrap响应式折叠导航栏 #

这是更适配移动端的方案，小屏时导航会折叠成汉堡按钮，点击展开：

<nav class="navbar navbar-expand-sm navbar-light">
  <div class="container-fluid hero-section">
    <a class="navbar-brand" href="#">
      <img class="logo" src="assets/logo.png" alt="Pangu Logo">
    </a>
    <!-- 小屏显示的汉堡按钮 -->
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
      <span class="navbar-toggler-icon"></span>
    </button>
    <!-- 可折叠的导航内容 -->
    <div class="collapse navbar-collapse justify-content-end" id="navbarNav">
      <div class="nav nav-pills nav-fill">
        <a class="nav-link active" aria-current="page" href="#">HOME</a>
        <a class="nav-link" href="#">PROJECTS</a>
        <a class="nav-link" href="#">ABOUT</a>
        <a class="nav-link" href="#">TEAM</a>
        <a class="nav-link" href="#">CONTACT</a>
      </div>
    </div>
  </div>
</nav>

需确保引入Bootstrap的JS文件以实现折叠功能：

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

补充说明 #

• 方案1适合导航项少、小屏能容纳的场景；
• 方案2是Bootstrap官方推荐的响应式导航方案，适配全尺寸屏幕，用户体验更优。

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