css - 如何使用 Bootstrap 5 将内容集中在移动设备上？

Question

当我从移动设备访问时，我需要将元素居中。在桌面上看起来不错。

桌面:

手机:

所需手机:

我使用 Bootstrap 5.3.0。我尝试使用 row 和 col 但我没有得到我想要的桌面结果。

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="83e1ececf7f0f7f1e2f3c3b6adb1adb0" rel="noreferrer noopener nofollow">[email protected]</a>/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="align-items-center 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 me-auto">Badge</span>
        </div>
        <!--end::Status-->
        <!--begin::Description-->
        <div class="d-flex flex-wrap fw-semibold">
          <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-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>

Answer 1

您设置 justification以移动设备为中心(默认)，然后覆盖它以获得更大的断点，如 justify-content-center justify-content-md-start。

您的水平列表也需要重构。它不太居中。它需要调整或重构才能使用 flex 功能而不是边距。

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="ea8885859e999e988b9aaadfc4d8c4d9" rel="noreferrer noopener nofollow">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">

<div class="d-flex flex-wrap flex-sm-nowrap mb-0 justify-content-center justify-content-md-start">
  <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>
</div>

<div class="flex-grow-1">
  <div class="d-flex  justify-content-center justify-content-md-start justify-content-md-between align-items-start flex-wrap mb-2">
    <div class="d-flex flex-column">
      <div class="align-items-center 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 me-auto">Badge</span>
      </div>

      <div class="d-flex flex-wrap fw-semibold justify-content-center justify-content-md-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>
      <div class="d-flex flex-wrap fw-semibold mb-0 fs-5 text-gray-400 d-none" id="legal_case_id">20</div>
    </div>
  </div>

  <div class="d-flex flex-wrap justify-content-start">
    <div class="d-flex flex-wrap">
      <div class="border border-gray-300 border-dashed rounded min-w-125px py-3 px-4 me-6 mb-3">
        <div class="d-flex align-items-center">
          <div class="fs-4 fw-bold">27 Jun, 2023</div>
        </div>

        <div class="fw-semibold fs-6 text-gray-400">event from mob</div>
      </div>

      <div class="border border-gray-300 border-dashed rounded min-w-125px py-3 px-4 me-6 mb-3">
        <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>
        <div class="fw-semibold fs-6 text-gray-400">Files</div>
      </div>
    </div>
  </div>
</div>