如何让Bootstrap导航标签内的表格始终居中于页面？

问题根源 #

你的代码里tab-content元素加了ml-1类，这个类给整个标签内容区添加了左边距，导致第二个标签的表格容器偏离页面中心。另外存在重复id的问题（两个导航项、两个表格用了相同id），这不符合HTML规范，可能引发其他潜在问题。

修正方案 #

1. 移除tab-content上的ml-1类，消除不必要的左偏移
2. 修正重复的id，确保页面中每个元素的id唯一
3. 保留每个标签页内row justify-content-center + col-7的结构，保证表格基于页面水平居中

修改后的完整代码 #

<div class="row">
  <div class="row justify-content-center">
    <div class="nav-wrapper col-7" id="profile-wrapper">
      <ul class="nav nav-tabs" id="myTab" role="tablist">
        <li class="nav-item" id="basicInfo-item" role="presentation">
          <button class="nav-link active" id="basicInfo-tab" data-bs-toggle="tab" data-bs-target="#basicInfo" type="button" role="tab" aria-controls="basicInfo" aria-selected="true">Basic Info</button>
        </li>
        <li class="nav-item" id="systemUse-item" role="presentation">
          <button class="nav-link" id="systemUse-tab" data-bs-toggle="tab" data-bs-target="#systemUse" type="button" role="tab" aria-controls="systemUse" aria-selected="false">System use</button>
        </li>
      </ul>
      <br>
    </div>
  </div>
  <div class="tab-content" id="myTabContent">
    <div class="tab-pane show active" id="basicInfo" role="tabpanel" aria-labelledby="basicInfo-tab">
      <div class="row justify-content-center">
        <div class="col-7">
          <table class="table table-bordered vertical-align" id="basicInfo-table">
            <tbody>
              <tr>
                <th scope="row" id="quality1">Placeholder</th>
                <td id="quality_value1"> Test1</td>
              </tr>
              <tr>
                <th scope="row" id="quality2">Placeholder</th>
                <td id="quality_value2"> Test2</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
    <div class="tab-pane" id="systemUse" role="tabpanel" aria-labelledby="systemUse-tab">
      <div class="row justify-content-center">
        <div class="col-7">
          <table class="table table-bordered vertical-align" id="systemUse-table">
            <tbody>
              <tr>
                <th scope="row" id="quality3">First Time User</th>
                <td id="quality_value3"> No </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
</div>

说明 #

修改后，标签内容区不再有额外的左边距，每个标签页内的row justify-content-center会让表格容器相对于整个页面水平居中，切换标签时表格位置不会再发生偏移。同时修正了重复id的问题，避免后续出现JS或样式选择器的异常。

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