Bootstrap导航栏右侧Login/Logout项移动设备不显示求助

我一眼就看出问题所在了——你重复使用了同一个id="navbarNavAltMarkup"！Bootstrap的折叠组件是通过data-target匹配唯一ID来控制内容显示的，两个折叠容器共用同一个ID，会导致移动端点击汉堡按钮时，只有第一个容器能被正确触发展开，第二个带justify-content-end的登录/登出菜单自然就“隐身”了。

最优解决方案：合并折叠容器，用flex布局实现右侧对齐 #

我们只需要把两个折叠容器合并成一个，然后利用Bootstrap的flex工具类让登录/登出项在大屏时靠右，小屏时正常显示在折叠菜单里，代码修改如下：

<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
  <a class="navbar-brand" href="#">Jatitree</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <!-- 合并为单个折叠容器 -->
  <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
    <!-- 左侧主导航 -->
    <div class="navbar-nav">
      <a class="nav-item nav-link" id="home" href="<?php echo base_url();?>">Home <span class="sr-only">(current)</span></a>
      <a class="nav-item nav-link" href="<?php echo base_url();?>BuyCars">Buy Goods</a>
      <a class="nav-item nav-link" href="<?php echo base_url();?>SellGoods">Sell Goods</a>
    </div>
    <!-- 右侧登录/登出导航：用ml-auto实现大屏靠右 -->
    <ul class="navbar-nav ml-auto">
      <?php if (!$this->session->userdata('logged_in')) echo '<a class="nav-link" href="'.base_url().'/Login">Login</a>'; else echo '<a class="nav-link" href="#">Logout</a>'; ?>
    </ul>
  </div>
</nav>

关键修改说明： #

1. 合并折叠容器：把两个collapse navbar-collapse容器合并成一个，这样移动端点击汉堡按钮时，所有导航项都会在同一个折叠菜单里显示。
2. 用ml-auto替代justify-content-end：ml-auto会给这个navbar-nav添加margin-left: auto的样式，在大屏（navbar-expand-lg对应的lg及以上尺寸）时，自动把登录/登出组推到导航栏右侧，和你之前想要的效果完全一致。

额外补充（不推荐的备选方案） #

如果非要保留两个折叠容器，你需要给第二个容器设置独立ID，同时修改汉堡按钮的data-target为多个ID（用逗号分隔），但这样会导致两个容器同时折叠/展开，体验不如合并方案流畅，示例代码如下（仅作参考）：

<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
  <a class="navbar-brand" href="#">Jatitree</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavMain, #navbarNavAuth" aria-controls="navbarNavMain navbarNavAuth" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNavMain">
    <div class="navbar-nav">
      <a class="nav-item nav-link" id="home" href="<?php echo base_url();?>">Home <span class="sr-only">(current)</span></a>
      <a class="nav-item nav-link" href="<?php echo base_url();?>BuyCars">Buy Goods</a>
      <a class="nav-item nav-link" href="<?php echo base_url();?>SellGoods">Sell Goods</a>
    </div>
  </div>
  <div class="collapse navbar-collapse justify-content-end" id="navbarNavAuth">
    <ul class="navbar-nav">
      <?php if (!$this->session->userdata('logged_in')) echo '<a class="nav-link" href="'.base_url().'/Login">Login</a>'; else echo '<a class="nav-link" href="#">Logout</a>'; ?>
    </ul>
  </div>
</nav>

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