Bootstrap Table列标题对齐异常问题求助

原因分析 #

这个对齐问题的核心是错误混用了Bootstrap的flex布局类和表格原生布局：

• 给<tr>添加d-flex类会把表格行变成flex容器，彻底破坏表格默认的列对齐机制——表格原本是基于列的同步布局，flex会让各行的列独立排列，直接导致标题和内容错位。
• col-0是无效的Bootstrap网格类（官方未定义该类），它会强制列宽度为0，内容溢出后进一步加剧对齐混乱。

修复方案 #

1. 移除所有<tr>标签上的d-flex类，恢复表格原生的布局逻辑。
2. 替换col-0类：
   • 若希望列宽自适应内容，直接删除所有col-*类，表格会自动根据内容分配列宽。
   • 若需要固定部分列的宽度，使用col-1到col-12这类合理的网格类（比如保留col-2给BG TASK RESULT列），或通过自定义CSS设置列宽。
3. 确保<thead>和<tbody>中的列数量完全一致（你的代码里列数匹配，这一点没问题）。

修改后的代码示例 #

<table class="table">
  <thead>
    <tr>
      <th>JOB ID</th>
      <th>JOB STATUS</th>
      <th>USER</th>
      <th>BG TASK STATUS</th>
      <th class="col-2">BG TASK RESULT</th>
      <th>BG TASK CREATED TIME</th>
      <th>BG TASK COMPLETED TIME</th>
      <th>DETAIL LOG LINK</th>    
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>15</td>
      <td>success</td>
      <td>None</td>
      <td></td>
      <td class="col-2"></td>
      <td></td>
      <td></td>
      <td><a href="/logs?job_id=15">Job Details</a></td>
    </tr>
  </tbody>
</table>

额外提示 #

如果需要更精细的列宽控制，可以给<th>和对应的<td>添加自定义CSS类：

.fixed-width-th {
  width: 140px;
}

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