如何实现navigation bar在桌面端与移动端的水平居中？

要解决桌面视图下导航栏的水平对齐问题，你需要借助Bootstrap的container类约束内容宽度并实现居中，同时调整HTML结构和少量CSS：

步骤1：引入Bootstrap样式 #

在现有样式链接前添加Bootstrap的CDN链接：

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">

步骤2：调整Header的HTML结构 #

将header内的logo和导航栏包裹在container容器中，同时利用Bootstrap的flex类实现水平分布：

<header class="bg-danger">
  <div class="container d-flex justify-content-between align-items-center py-3">
    <div class="logo">Thinkfulbnb</div>
    <nav>
      <ul id="menu" class="d-flex list-unstyled mb-0">
        <li class="mx-3"><a href="#stay" class="text-white text-decoration-none">Stay</a></li>
        <li class="mx-3"><a href="#about" class="text-white text-decoration-none">About</a></li>
        <li class="mx-3"><a href="#ideas" class="text-white text-decoration-none">Ideas</a></li>
        <li><a href="#host" class="text-white text-decoration-none">Host</a></li>
      </ul>
    </nav>
  </div>
</header>

步骤3：简化自定义CSS #

移除原导航相关的自定义flex布局代码，保留字体和交互样式：

/* -------  Navigation ------- */
.logo {
  font-family: "Pangolin", cursive;
  font-size: clamp(24px, -1rem + 8.333vw, 72px);
  color: #fff;
}

header nav ul li a:hover {
  color: #bdbdbd;
  text-decoration: none;
}

/* 移除以下原自定义布局代码 */
/* header {
  background-color: #ff385c;
  padding: 20px 20px 0 20px;
  text-align: center;
}
header nav {
  display: flex;
  justify-content: center;
}
header nav ul {
  display: flex;
  flex-wrap: wrap;
}
header nav ul li {
  list-style-type: none;
}
header nav ul li a {
  color: #fff;
  text-decoration: none;
  padding: 0 20px 0 0;
} */

核心原理 #

Bootstrap的container类会为内容提供居中的响应式宽度容器，结合d-flex justify-content-between可以让logo和导航栏分别靠左右两侧对齐，align-items-center保证垂直方向居中，完美适配桌面视图的水平布局需求。

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