小屏幕下Navbar导航链接变为纵向排列，如何保持横向并排显示？

你的导航在移动端纵向堆叠是三个代码问题导致的：

• .navbar同时设置了display:flex和display:inline-block，后者覆盖了弹性布局配置
• 移动端媒体查询中给li设置了width:100%，强制每个导航项占满整行
• 导航列表.navbar-nav没有设置强制横向不换行的弹性布局属性

修改后的完整CSS代码 #

.navbar{
  background-color: rgba(255, 255, 255, 0.747);
  display: flex;
  float: none !important;
  width:100%;
  padding: 0.5rem 0;
}

/* 导航列表强制横向排布 */
.navbar-nav {
  display: flex;
  flex-wrap: nowrap;
  list-style: none;
  padding-left: 1rem;
  margin: 0;
  /* 小屏幕内容溢出时支持横向滚动，不需要可删除 */
  overflow-x: auto;
  /* 隐藏滚动条，不需要可删除 */
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.navbar-nav::-webkit-scrollbar {
  display: none;
}

.nav-link,
.navbar-brand {
  flex-shrink: 0; /* 禁止导航项被压缩变形 */
  color: var(--om);
  cursor: pointer;
  font-size: 1rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-right: 1.2rem;
}
@media (max-width: 420px) {
  /* 小屏幕缩小字号和间距适配宽度，可自行调整数值 */
  .nav-link {
    font-size: 0.75rem;
    letter-spacing: 1px;
    margin-right: 0.8rem;
  }
}

关键说明 #

• 你原有代码中媒体查询里的.navbar-brand ul li {width:100%}是导致纵向排布的核心原因，已删除
• 你使用了Bootstrap的navbar-expand-lg类，默认会在小于992px宽度时折叠导航，你已经注释了collapse容器，上述修改可以覆盖Bootstrap默认的折叠逻辑，无需额外调整HTML代码
• 如果不需要横向滚动，可进一步缩小移动端的字号、间距，或者删减非核心导航项，保证所有内容在屏幕宽度内完全显示

内容的提问来源于stack exchange，提问作者Ryan Hartley