Bootstrap 4表格下拉菜单位置异常问题求助

这个问题我之前也碰到过！核心原因几乎都是下拉菜单的标识重复或者绑定错误，导致点击第二行按钮时，浏览器还是找到了第一行的下拉菜单元素来显示。下面给你一步步解决的方法：

1. 确保每个下拉菜单有唯一的ID #

Bootstrap的下拉菜单是通过触发按钮的data-target（或者href）和下拉菜单的id来关联的。如果所有行的下拉菜单都用同一个ID，那不管点哪行的按钮，都会弹出第一个匹配的菜单。

修正后的代码示例： #

<div class="table-responsive">
  <table class="table table-hover table-sm">
    <thead>
      <tr>
        <th>Фио сотрудника</th>
        <th>Должность</th>
        <th>Действия</th>
      </tr>
    </thead>
    <tbody>
      <!-- 第一行 -->
      <tr>
        <td>Иванов Иван</td>
        <td>Разработчик</td>
        <td>
          <button class="btn btn-sm btn-outline-secondary" 
                  type="button" 
                  data-toggle="dropdown" 
                  data-target="#dropdown-1"
                  aria-haspopup="true" 
                  aria-expanded="false">
            Настройки
          </button>
          <div class="dropdown-menu" id="dropdown-1">
            <a class="dropdown-item" href="#">Редактировать</a>
            <a class="dropdown-item" href="#">Удалить</a>
          </div>
        </td>
      </tr>
      <!-- 第二行 -->
      <tr>
        <td>Петров Петр</td>
        <td>Дизайнер</td>
        <td>
          <button class="btn btn-sm btn-outline-secondary" 
                  type="button" 
                  data-toggle="dropdown" 
                  data-target="#dropdown-2"
                  aria-haspopup="true" 
                  aria-expanded="false">
            Настройки
          </button>
          <div class="dropdown-menu" id="dropdown-2">
            <a class="dropdown-item" href="#">Редактировать</a>
            <a class="dropdown-item" href="#">Удалить</a>
          </div>
        </td>
      </tr>
    </tbody>
  </table>
</div>

2. 动态生成表格行的处理方案 #

如果你的表格是通过后端循环或者前端JS动态生成的，一定要给每个下拉菜单生成唯一的ID标识，比如用行索引、数据ID来命名：

示例（前端JS动态生成）： #

const employees = [
  {name: "Иванов Иван", position: "Разработчик"},
  {name: "Петров Петр", position: "Дизайнер"}
];

const tbody = document.querySelector('table tbody');
employees.forEach((emp, index) => {
  const row = document.createElement('tr');
  row.innerHTML = `
    <td>${emp.name}</td>
    <td>${emp.position}</td>
    <td>
      <button class="btn btn-sm btn-outline-secondary" 
              type="button" 
              data-toggle="dropdown" 
              data-target="#dropdown-${index}"
              aria-haspopup="true" 
              aria-expanded="false">
        Настройки
      </button>
      <div class="dropdown-menu" id="dropdown-${index}">
        <a class="dropdown-item" href="#">Редактировать</a>
        <a class="dropdown-item" href="#">Удалить</a>
      </div>
    </td>
  `;
  tbody.appendChild(row);
});

3. 额外排查点 #

• 检查表格的<tr>或<td>有没有设置position: relative/absolute，这种自定义定位会干扰Bootstrap下拉菜单的默认定位上下文。
• 确认Bootstrap 4的JS和依赖的jQuery都正确加载，没有版本冲突（Bootstrap 4需要jQuery 1.9.1+）。

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