如何阻止导航项在窗口调整大小时垂直堆叠？

窗口调整大小时，导航项会出现垂直堆叠的情况，希望Item 1和Item 2始终保持在同一行。

模板代码如下：

<nav class="navbar navbar-expand-lg bg-body-tertiary">
    <ul class="navbar-nav me-auto mb-2 mb-lg-0">
        <li class="nav-item">
            <a class="nav-link" aria-current="page" href="#">Item 1</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" aria-current="page" href="#">Item 2</a>
        </li>
    </ul>
</nav>

尝试过以下无效方法：

• CSS设置：

  ul .nav-item {
      display: inline;
  }
  

• CSS设置：

  .nav-item {
      display: inline;
  }
  

• CSS设置：

  .nav-item {
      float: top;
  }
  

• 修改HTML结构：

  <ul class="navbar-nav me-auto mb-2 mb-lg-0 row">
      <li class="nav-item">
          <a class="nav-link col" aria-current="page" href="#">Item 1</a>
      </li>
      <li class="nav-item">
          <a class="nav-link col" aria-current="page" href="#">Item 2</a>
      </li>
  </ul>
  

问题根源是navbar-expand-lg类——Bootstrap会在屏幕宽度小于992px（lg断点）时，自动让导航栏折叠堆叠。提供两种直接解决思路：

方案1：强制导航栏始终展开 #

如果希望所有屏幕尺寸下导航项都保持同行，直接把navbar-expand-lg替换成navbar-expand，这个类会强制导航栏始终处于展开状态：

<nav class="navbar navbar-expand bg-body-tertiary">
    <ul class="navbar-nav me-auto mb-2 mb-lg-0">
        <li class="nav-item">
            <a class="nav-link" aria-current="page" href="#">Item 1</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" aria-current="page" href="#">Item 2</a>
        </li>
    </ul>
</nav>

方案2：自定义CSS强制不堆叠 #

如果需要保留navbar-expand-lg的其他特性，仅让这两个导航项始终同行，可通过CSS强制.navbar-nav使用flex布局且不换行：

.navbar-nav {
    display: flex !important;
    flex-wrap: nowrap !important;
}

添加!important是为了覆盖Bootstrap的响应式样式，确保优先级足够。

之前方法无效的原因 #

• display: inline无法覆盖Bootstrap默认给.nav-item设置的flex布局；
• float: top不是合法的CSS属性，即便用float: left也会被Bootstrap的flex布局忽略；
• 给<ul>加row、<a>加col会和导航栏内置样式冲突，导致布局混乱。

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