Bootstrap CSS导航栏移动端仅显示navbar-brand无法完整展示

你代码里给导航栏加了navbar-expand-lg类，这是Bootstrap导航的响应式类：仅当屏幕宽度≥992px（Bootstrap默认lg断点）时，导航菜单项才会水平展开显示；宽度小于这个值的移动端设备上，collapse navbar-collapse容器包裹的菜单项会默认隐藏，而你的代码里没有加移动端用来触发菜单展开的切换按钮，所以移动端访问时只能看到品牌logo项。

根据你想要的交互效果二选一即可：

• 方案1：全尺寸直接展示所有导航项，不需要折叠收起
  把导航标签上的navbar-expand-lg替换为navbar-expand，同时删除菜单容器上的collapse类，这样所有屏幕尺寸下导航项都会直接展示，不会被隐藏。修改后的完整代码：

<nav class="navbar navbar-expand" style="background-color: #757070; ">
    <div class="container-fluid">
      <a class="navbar-brand" style="color: #ffff; font-size: xx-large; font-family: Inter;" href="index.html">Metal Arte</a>
      <div class="navbar-collapse" id="navbarNavDropdown">
        <ul class="navbar-nav">
          <li class="nav-item">
            <a class="nav-link" style="color: #ffff ; font-size: x-large; font-family: inter;" href="historia.html">Nossa história</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" style="color: #ffff ; font-size: x-large; font-family: inter;" href="#">Conheça nossos serviços</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" style="color: #ffff ; font-size: x-large; font-family: inter;" href="contato.html">Entre em Contato</a>
          </li>
        </ul>
      </div>
    </div>
</nav>

• 方案2：保留移动端折叠交互，点击按钮展开/收起菜单
  保留原有的navbar-expand-lg和collapse类，在品牌项后面加一个导航切换按钮（汉堡按钮），按钮的目标选择器要和菜单容器的id对应，修改后的完整代码：

<nav class="navbar navbar-expand-lg" style="background-color: #757070; ">
    <div class="container-fluid">
      <a class="navbar-brand" style="color: #ffff; font-size: xx-large; font-family: Inter;" href="index.html">Metal Arte</a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="切换导航">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarNavDropdown">
        <ul class="navbar-nav">
          <li class="nav-item">
            <a class="nav-link" style="color: #ffff ; font-size: x-large; font-family: inter;" href="historia.html">Nossa história</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" style="color: #ffff ; font-size: x-large; font-family: inter;" href="#">Conheça nossos serviços</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" style="color: #ffff ; font-size: x-large; font-family: inter;" href="contato.html">Entre em Contato</a>
          </li>
        </ul>
      </div>
    </div>
</nav>

注意：选择方案2需要确保页面已经正确引入Bootstrap的JS依赖，否则点击按钮不会触发展开/收起效果。

内容的提问来源于stack exchange，提问作者Arthur Régis Mais