求助：基于Bootstrap实现左侧Logo右侧导航的响应式固定顶部导航栏

问题描述 #

我需要实现一个固定在页面顶部的响应式导航栏，要求左侧显示Logo图标，右侧排列导航链接，在移动端自动折叠为汉堡菜单。但自己编写的代码无法实现预期效果，已移除原有代码中的Bootstrap相关内容，希望得到基于Bootstrap的完整可行方案。

解决方案 #

直接利用Bootstrap自带的navbar组件即可快速实现需求，以下是完整代码实现：

HTML代码 #

<!-- 引入Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">

<!-- 导航栏 -->
<nav class="navbar navbar-expand-lg navbar-light fixed-top custom-navbar">
  <!-- Logo区域 -->
  <a class="navbar-brand" href="#">
    <img src="https://via.placeholder.com/50" alt="logo oc" />
  </a>
  
  <!-- 移动端汉堡按钮 -->
  <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  
  <!-- 导航链接区域 -->
  <div class="collapse navbar-collapse justify-content-end" id="navbarNav">
    <ul class="navbar-nav">
      <li class="nav-item custom-nav-block">
        <a class="nav-link" href="#A">A</a>
      </li>
      <li class="nav-item custom-nav-block">
        <a class="nav-link" href="#B">B</a>
      </li>
      <li class="nav-item custom-nav-block">
        <a class="nav-link" href="#C">C</a>
      </li>
      <li class="nav-item custom-nav-block">
        <a class="nav-link" href="#D">D</a>
      </li>
      <li class="nav-item">
        <a class="nav-link custom-button-link" href="#">Blog</a>
      </li>
    </ul>
  </div>
</nav>

<!-- 引入Bootstrap JS（用于折叠菜单交互） -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>

自定义CSS代码 #

/* 自定义导航栏高度和内边距 */
.custom-navbar {
  height: 100px;
  padding: 0 30px;
  background-color: #fff; /* 根据需要修改背景色 */
}

/* 调整导航链接的间距和垂直居中 */
.custom-nav-block {
  margin-left: 40px;
  display: flex;
  align-items: center;
  height: 100%;
}

/* 自定义Blog按钮样式 */
.custom-button-link {
  padding: 8px 16px;
  background-color: #007bff; /* 根据需要修改按钮背景色 */
  color: #fff !important;
  border-radius: 4px;
}

.custom-button-link:hover {
  background-color: #0056b3; /* 按钮 hover 效果 */
}

/* 移动端适配：导航栏高度自动调整 */
@media (max-width: 991px) {
  .custom-navbar {
    height: auto;
    padding: 15px 30px;
  }
  
  .custom-nav-block {
    margin-left: 0;
    height: auto;
    padding: 10px 0;
  }
  
  .custom-button-link {
    width: fit-content;
    margin-top: 10px;
  }
}

关键实现说明 #

1. 固定顶部：使用Bootstrap的fixed-top类，让导航栏始终固定在页面顶部。
2. Logo靠左：navbar-brand类默认左对齐，直接放入Logo即可。
3. 导航链接靠右：通过justify-content-end类让导航容器右对齐，实现右侧排列。
4. 响应式折叠：navbar-expand-lg控制屏幕宽度小于992px时自动折叠导航，配合navbar-toggler和collapse类实现汉堡菜单交互。
5. 自定义样式：通过自定义CSS调整导航栏高度、链接间距、按钮样式，适配设计需求的同时保留Bootstrap响应式特性。

原代码问题分析 #

原有代码未充分利用Bootstrap组件系统，手动编写的flex布局和固定定位逻辑与Bootstrap样式冲突，且缺少移动端折叠菜单交互，导致无法实现响应式效果。使用Bootstrap原生navbar组件可避免这些问题，快速达成需求。

内容的提问来源于stack exchange，提问作者Fur and Claws