你们能帮帮我吗？为啥引导卡留在移动视图中

Posted 2023-02-22

【中文标题】你们能帮帮我吗？为啥引导卡留在移动视图中

【英文标题】：Can you guys help me? Why did the bootstrap card stick left in mobile view你们能帮帮我吗？为什么引导卡留在移动视图中

【发布时间】：2021-07-31 19:22:38

【问题描述】：

我做了什么，但它仍然不起作用。也许你们可以帮助我？ 这是一些照片。

BEFORE

AFTER

当我以手机尺寸查看卡片时，我希望卡片停留在中间。 也许有一些我想念的代码？ 如果有人为我解决了这个问题，我会非常感谢你。 我仍然是使用引导程序的新手，而不是 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" >
          <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" >
          <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" >
          <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" >
          <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 -->

【参考方案1】：

只需在每个 col-md col-sm 附近添加类名 d-flex justify-content-center

（即）col-md col-sm d-flex justify-content-center

示例：

【参考方案2】：

将margin-left: auto; margin-right: auto; 添加到移动设备的.card 内部媒体查询中。

【参考方案3】：

您正在使用引导程序，您需要将 mx-auto 类添加到每个 div class="card" 中，就是这样。

来源：bootstrap docs

复制这段代码，这是你的固定代码：

<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 mx-auto" style="width: 15rem;">
        <img src="image" class="card-img-top" >
        <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 mx-auto" style="width: 15rem;">
        <img src="image" class="card-img-top" >
        <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 mx-auto" style="width: 15rem;">
        <img src="image" class="card-img-top" >
        <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 mx-auto" style="width: 15rem;">
        <img src="image" class="card-img-top" >
        <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 -->