在页面中心居中引导表答案

【问题标题】：Centering bootstrap table in center of page在页面中心居中引导表
【发布时间】：2022-07-23 02:08:03
【问题描述】：

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

<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>

【问题讨论】：

标签： html css bootstrap-5

【解决方案1】：

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

<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" 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 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>

【讨论】：