如何用Bootstrap实现侧边栏右侧带更多选项的垂直导航

要实现侧边栏每个导航项右侧带拓展选项的效果，基于你现有的基础垂直导航代码，借助Bootstrap自带的flex布局工具类和内置组件就能完成，无需额外引入第三方依赖。

实现核心要点 #

• 给每个导航项的.nav-link添加d-flex justify-content-between align-items-center类，让导航项内部自动实现左右两端对齐、内容垂直居中的布局
• 右侧拓展区域可根据需求自由嵌套徽章、图标、操作按钮、下拉触发元素等Bootstrap内置组件
• 如果需要拓展选项带下拉菜单功能，直接绑定Bootstrap的dropdown组件即可实现交互

完整示例代码 #

<body>
<!-- 侧边栏容器，可根据需求调整宽度 -->
<div class="container mt-3" style="width: 280px;">
  <h2>带拓展选项的垂直侧边导航</h2>
  <p>每个导航项右侧可自定义配置操作选项：</p>
  <ul class="nav flex-column border rounded p-2">
    <!-- 导航项1：右侧带未读消息徽章 -->
    <li class="nav-item mb-1">
      <a class="nav-link d-flex justify-content-between align-items-center rounded" href="#">
        <span>消息通知</span>
        <span class="badge bg-danger rounded-pill">5</span>
      </a>
    </li>
    <!-- 导航项2：右侧带设置操作图标 -->
    <li class="nav-item mb-1">
      <a class="nav-link d-flex justify-content-between align-items-center rounded" href="#">
        <span>个人设置</span>
        <i class="bi bi-gear"></i>
      </a>
    </li>
    <!-- 导航项3：右侧带下拉菜单触发按钮 -->
    <li class="nav-item mb-1 dropdown">
      <div class="nav-link d-flex justify-content-between align-items-center rounded" role="button" data-bs-toggle="dropdown" aria-expanded="false">
        <span>文档管理</span>
        <i class="bi bi-chevron-down"></i>
      </div>
      <ul class="dropdown-menu">
        <li><a class="dropdown-item" href="#">我的文档</a></li>
        <li><a class="dropdown-item" href="#">共享文档</a></li>
        <li><a class="dropdown-item" href="#">回收站</a></li>
      </ul>
    </li>
    <!-- 禁用导航项 -->
    <li class="nav-item">
      <a class="nav-link disabled d-flex justify-content-between align-items-center rounded" href="#">
        <span>已禁用选项</span>
        <i class="bi bi-ban"></i>
      </a>
    </li>
  </ul>
</div>

<!-- Bootstrap基础依赖，项目已引入的话可忽略 -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>

补充说明：

• 示例中给外层容器固定宽度是为了适配侧边栏的常见尺寸，你可以根据业务需求调整宽度或者适配响应式规则
• 右侧拓展区域的内容可完全自定义，除了示例中的徽章、图标、下拉菜单外，还可以放开关、小型按钮等任意元素
• 示例用到的bootstrap-icons可以替换为你项目中使用的其他图标库，不影响原有布局逻辑

内容的提问来源于stack exchange，提问作者Andrea Demitri Seferi