html - 你们能帮帮我吗？为什么引导卡留在移动视图中

问题描述

我做了任何事情，但它仍然无法正常工作。也许你们可以帮助我？这里有一些照片。

当我以手机尺寸查看卡片时，我希望卡片保持在中间。也许有一些我想念的代码？如果有人为我解决了这个问题，我会非常感谢你。我仍然是使用引导程序的新手，而不是 HTML 和 CSS 方面的专家。这是代码。

<!-- Members Card -->
<div class="container my-5">

  <h1 class="text-center mb-3"><b>MEMBERS</b></h1>

  <div class="d-flex justify-content-around">

    <div class="row">
      <!-- Jennie -->
      <div class="col-md col-sm">
        <div class="card" style="width: 15rem;">
          <img src="{image}" class="card-img-top" alt="...">
          <div class="card-body text-center">
            <h5 class="card-title"><b>{Name}</b></h5>
            <p class="card-text">{desc}</p>
            <a href="#" class="btn btn-dark btn-outline-secondary text-white">show more</a>
          </div>
        </div>
      </div>

      <!-- Jisoo -->
      <div class="col-md col-sm">
        <div class="card" style="width: 15rem;">
          <img src="{image}" class="card-img-top" alt="...">
          <div class="card-body text-center">
            <h5 class="card-title"><b>{Name}</b></h5>
            <p class="card-text">{desc}</p>
            <a href="#" class="btn btn-dark btn-outline-secondary text-white">show more</a>
          </div>
        </div>
      </div>

      <!-- Lisa -->
      <div class="col-md col-sm">
        <div class="card" style="width: 15rem;">
          <img src="{image}" class="card-img-top" alt="...">
          <div class="card-body text-center">
            <h5 class="card-title"><b>{Name}</b></h5>
            <p class="card-text">{desc}</p>
            <a href="#" class="btn btn-dark btn-outline-secondary text-white">show more</a>
          </div>
        </div>
      </div>

      <!-- Rose -->
      <div class="col-md col-sm">
        <div class="card" style="width: 15rem;">
          <img src="{image}" class="card-img-top" alt="...">
          <div class="card-body text-center">
            <h5 class="card-title"><b>{Name}</b></h5>
            <p class="card-text">{desc}</p>
            <a href="#" class="btn btn-dark btn-outline-secondary text-white">show more</a>
          </div>
        </div>
      </div>

    </div> <!--close tag for row-->

  </div> <!--close tag for d-flex -->
</div> <!--close tag for container-->
<!-- End Members Card -->

标签： htmlcsswebframeworksbootstrap-5

html - 你们能帮帮我吗？为什么引导卡留在移动视图中

问题描述

解决方案

推荐阅读