如何使用Bootstrap 5实现移动端内容居中？

针对你需要移动端元素居中、桌面端保持原有布局的需求，只需在现有代码基础上添加Bootstrap的响应式对齐类即可实现，无需重构row/col结构：

修改要点： #

• 标题行：给包含标题的容器添加 d-flex justify-content-center justify-content-sm-start，实现移动端居中、桌面端左对齐；同时调整徽章的margin类为ms-auto ms-sm-0，保证移动端徽章在标题行末尾居中对齐
• 描述行：给描述文本容器添加 justify-content-center justify-content-sm-start
• 统计卡片容器：给统计卡片的外层容器添加 justify-content-center justify-content-sm-start

修改后的完整代码： #

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">

<div class="d-flex flex-wrap flex-sm-nowrap mb-0">
  <div class="text-center">
    <!--begin::Image-->
    <div class="d-flex justify-content-center align-items-center flex-shrink-0 bg-light rounded w-100px h-100px w-lg-150px h-lg-150px me-7 mb-4 border border-secondary">
      <img class="mw-50px mw-lg-75px" src="https://via.placeholder.com/100" alt="image">
    </div>
    <!--end::Image-->
  </div>
  <!--begin::Wrapper-->
  <div class="flex-grow-1">
    <!--begin::Head-->
    <div class="d-flex justify-content-between align-items-start flex-wrap mb-2">
      <!--begin::Details-->
      <div class="d-flex flex-column">
        <!--begin::Status-->
        <div class="d-flex align-items-center justify-content-center justify-content-sm-start mb-1">
          <a class="text-gray-800 text-hover-primary fs-2 fw-bold me-3" href="#">Title Subject</a>
          <span class="text-gray-800 text-hover-primary fs-2 fw-bold me-3">-</span>
          <span class="text-gray-800 text-hover-primary fs-2 fw-bold me-3">Location</span>
          <span class="text-gray-800 text-hover-primary fs-2 fw-bold me-3">-</span>
          <span class="text-gray-800 text-hover-primary fs-2 fw-bold me-3">title subject2</span>
          <span class="badge badge-info ms-auto ms-sm-0">Badge</span>
        </div>
        <!--end::Status-->
        <!--begin::Description-->
        <div class="d-flex flex-wrap fw-semibold justify-content-center justify-content-sm-start">
          <span class="me-2 fs-5 text-white-400">Status</span>
          <span class="mb-0 fs-5 text-white-400">
                        <em>unknown yet</em>
                    </span>
        </div>
        <!--end::Description-->
        <!--begin::User id-->
        <div class="d-flex flex-wrap fw-semibold mb-0 fs-5 text-gray-400 d-none" id="legal_case_id">20</div>
        <!--end::User id-->
      </div>
      <!--end::Details-->
    </div>
    <!--end::Head-->
    <!--begin::Info-->
    <div class="d-flex flex-wrap justify-content-center justify-content-sm-start">
      <!--begin::Stats-->
      <div class="d-flex flex-wrap">
        <!--begin::Stat-->
        <div class="border border-gray-300 border-dashed rounded min-w-125px py-3 px-4 me-6 mb-3">
          <!--begin::Number-->
          <div class="d-flex align-items-center">
            <div class="fs-4 fw-bold">27 Jun, 2023</div>
          </div>
          <!--end::Number-->
          <!--begin::Label-->
          <div class="fw-semibold fs-6 text-gray-400">event from mob</div>
          <!--end::Label-->
        </div>
        <!--end::Stat-->
        <!--begin::Stat-->
        <div class="border border-gray-300 border-dashed rounded min-w-125px py-3 px-4 me-6 mb-3">
          <!--begin::Number-->
          <div class="d-flex align-items-center">
            <div class="fs-4 fw-bold counted" data-kt-countup="true" data-kt-countup-value="0" data-kt-initialized="1">0</div>
          </div>
          <!--end::Number-->
          <!--begin::Label-->
          <div class="fw-semibold fs-6 text-gray-400">Files</div>
          <!--end::Label-->
        </div>
        <!--end::Stat-->
      </div>
      <!--end::Stats-->
    </div>
    <!--end::Info-->
  </div>
  <!--end::Wrapper-->
</div>

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