如何在Bootstrap5网页中居中内容同时保留响应式特性？

你可以按照以下步骤修改代码即可实现内容居中，同时完全保留Bootstrap的响应式特性：

• 修正无效类名：你代码中使用的col1不是Bootstrap 5的合法内置类，统一替换为响应式列类，可搭配mx-auto类实现列本身水平居中
• 内容对齐设置：给所有列添加text-center类，实现内部文本、行内元素居中显示
• 导航适配：因为导航组件是flex布局，需要额外给ul.nav添加justify-content-center类，保证导航项居中
• 可选优化：如果你不需要页面内容铺满整个视口宽度，可直接将外层的container-fluid替换为container类，Bootstrap会自动生成响应式的左右边距，实现整体内容居中。

修改后的完整代码如下：

<!-- Bootstrap-5 -->
<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>


<!-- Body -->
<div class="container-fluid">
  <div class="row">
    <div class="col col-lg-10 col-xl-8 mx-auto text-center">
      <h1>XXXX XXXXX</h1>
    </div>
  </div>
  <div class="row">
    <div class="col col-lg-10 col-xl-8 mx-auto text-center">
      <ul class="nav justify-content-center">
        <li class="nav-item">
          <a class="nav-link active" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link active" href="#">Meet Jason</a>
        </li>
        <li class="nav-item">
          <a class="nav-link active" href="#">Our Philosophy</a>
        </li>
        <li class="nav-item">
          <a class="nav-link active" href="#">Curiculum</a>
        </li>
        <li class="nav-item">
          <a class="nav-link active" href="#">Contact Us</a>
        </li>
      </ul>
    </div>
  </div>

  <div class="row">
    <div class="col col-lg-10 col-xl-8 mx-auto text-center">
      <div id="carouselExampleInterval" class="carousel slide" data-bs-ride="carousel">
        <div class="carousel-inner">
          <div class="carousel-item active" data-bs-interval="10000">
            <img src="images/_A0D7832.jpg" class="d-block w-100" alt="...">
          </div>
          <div class="carousel-item" data-bs-interval="10000">
            <img src="images/_A0D7906.jpg" class="d-block w-100" alt="...">
          </div>
          <div class="carousel-item" data-bs-interval="10000">
            <img src="images/_A0D7942.jpg" class="d-block w-100" alt="...">
          </div>
        </div>
        <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleInterval" data-bs-slide="prev">
                        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                        <span class="visually-hidden">Previous</span>
                    </button>
        <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleInterval" data-bs-slide="next">
                        <span class="carousel-control-next-icon" aria-hidden="true"></span>
                        <span class="visually-hidden">Next</span>
                    </button>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col col-lg-10 col-xl-8 mx-auto text-center">
      <p>Hello Worldsssssss!</p>
    </div>
  </div>
</div>

如果你希望内容在大屏上的宽度更宽/更窄，只需要调整col-lg-10 col-xl-8的数值即可，比如改成col-lg-11 col-xl-9就是更宽的效果。

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