html - 在页面中心居中 Bootstrap 表

Question

我正在努力在中心放置一个 Bootstrap 表作为 Bootstrap 导航选项卡的内容。它以第一个选项卡为中心，但是当我单击第二个选项卡时，它以该选项卡为中心。我如何才能使它仅位于页面中间而不针对每个选项卡进行调整？

<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="profileItem" 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="profileItem" 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 ml-1" 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="profile_table">
            <tbody>
              <tr>
                <th scope="row" id="quality">Placeholder</th>
                <td id="quality_value"> Test1</td>
              </tr>
              <tr>
                <th scope="row" id="quality">Placeholder</th>
                <td id="quality_value"> Test2</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
    <div class="tab-pane show" 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="profile_table">
            <tbody>
              <tr>
                <th scope="row" id="quality">First Time User</th>
                <td id="quality_value"> No </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 1

您需要为每个表格单元格使用 col-6 类，它等于 width: 50% 整行的一半。此外，我将 row justify-content-center 添加到 myTabContent 以使选项卡和内容居中。

已更新。为了使选项卡居中，我将 col-6 添加到右侧选项卡并使用 ms-auto 类移动左侧选项卡.

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous" />
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

<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 ms-auto" id="profileItem" 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 col-6" id="profileItem" 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 ml-1 row justify-content-center" 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="profile_table">
            <tbody>
              <tr>
                <th scope="row" id="quality" class="col-6">Placeholder</th>
                <td id="quality_value" class="col-6">Test1</td>
              </tr>
              <tr>
                <th scope="row" id="quality">Placeholder</th>
                <td id="quality_value">Test2</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
    <div class="tab-pane show" 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="profile_table">
            <tbody>
              <tr>
                <th scope="row" id="quality" class="col-6">First Time User</th>
                <td id="quality_value" class="col-6">No</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
</div>