在移动视图中居中引导卡答案

【问题标题】：Centering Bootstrap Cards in Mobile View在移动视图中居中引导卡
【发布时间】：2019-11-12 07:57:45
【问题描述】：

在移动视图中，卡片未按预期居中。

我已尝试按照先前答案中的建议使用 d-flex 和 justify-content-center，但无济于事。

我注意到将 mx-auto 添加到每个卡片类中都可以正常工作并保持它们很好地居中，但是，使用此方法也可以消除卡片之间的间隙。

请查看我的网站here。

在桌面视图中看起来不错，但是一旦在移动视图中所有卡片都被推到右侧，我可以看到卡片超出了我的主标记中定义的边距。

这是 HTML：

    <!DOCTYPE html>
<html lang="en">
<body>
  <main>
    <!--Cards-->
    <div class="card-deck mx-auto">
      <!--Games Card-->
      <div class="card text-center text-white bg-dark mb-3 d-flex" style="width: 18rem;">
        <a href="#">
        <img src="../img/games.png" class="card-img-top" alt="Games">
        <div class="card-body">
          <p class="card-text"><strong>Games</strong></p>
        </div>
        </a>
      </div>
      <!-- Consoles Card-->
      <div class="card text-center text-white bg-dark mb-3" style="width: 18rem;">
        <a href="##">
        <img src="../img/consoles.png" href="#" class="card-img-top" alt="Consoles">
        <div class="card-body">
          <p class="card-text"><strong>Consoles</strong></p>
        </div>
      </a>
      </div>
      <!-- Getting Started Card-->
      <div class="card text-center text-white bg-dark mb-3" style="width: 18rem;">
        <a href="###">
        <img src="../img/gettingStarted.png" href="#" class="card-img-top" alt="Getting Started">
        <div class="card-body">
          <p class="card-text"><strong>Getting Started</strong></p>
        </div>
       </a>
      </div>
    </div>

  </main>
  <!--JavaScript-->
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

</body>
</html>

我正在使用 Bootstrap 4，请帮忙！

【问题讨论】：

标签： html css bootstrap-4

【解决方案1】：

一个非常简单的方法是将margin:0 auto; 添加到card-deck div！

<!DOCTYPE html>
<html lang="en">
<body>
  <main>
    <!--Cards-->
    <div class="card-deck" style="margin:0 auto">
      <!--Games Card-->
      <div class="card text-center text-white bg-dark mb-3 d-flex" style="width: 18rem;">
        <a href="#">
        <img src="../img/games.png" class="card-img-top" alt="Games">
        <div class="card-body">
          <p class="card-text"><strong>Games</strong></p>
        </div>
        </a>
      </div>
      <!-- Consoles Card-->
      <div class="card text-center text-white bg-dark mb-3" style="width: 18rem;">
        <a href="##">
        <img src="../img/consoles.png" href="#" class="card-img-top" alt="Consoles">
        <div class="card-body">
          <p class="card-text"><strong>Consoles</strong></p>
        </div>
      </a>
      </div>
      <!-- Getting Started Card-->
      <div class="card text-center text-white bg-dark mb-3" style="width: 18rem;">
        <a href="###">
        <img src="../img/gettingStarted.png" href="#" class="card-img-top" alt="Getting Started">
        <div class="card-body">
          <p class="card-text"><strong>Getting Started</strong></p>
        </div>
       </a>
      </div>
    </div>

  </main>
  <!--JavaScript-->
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

</body>
</html>

【讨论】：

【解决方案2】：

如果你把 align-items-center 类放在 card-deck 父 div 中，你可以得到 center card。

<!DOCTYPE html>
<html lang="en">
<body>
  <main>
    <!--Cards-->
    <div class="card-deck mx-auto align-items-center">
      <!--Games Card-->
      <div class="card text-center text-white bg-dark mb-3 d-flex" style="width: 18rem;">
        <a href="#">
        <img src="../img/games.png" class="card-img-top" alt="Games">
        <div class="card-body">
          <p class="card-text"><strong>Games</strong></p>
        </div>
        </a>
      </div>
      <!-- Consoles Card-->
      <div class="card text-center text-white bg-dark mb-3" style="width: 18rem;">
        <a href="##">
        <img src="../img/consoles.png" href="#" class="card-img-top" alt="Consoles">
        <div class="card-body">
          <p class="card-text"><strong>Consoles</strong></p>
        </div>
      </a>
      </div>
      <!-- Getting Started Card-->
      <div class="card text-center text-white bg-dark mb-3" style="width: 18rem;">
        <a href="###">
        <img src="../img/gettingStarted.png" href="#" class="card-img-top" alt="Getting Started">
        <div class="card-body">
          <p class="card-text"><strong>Getting Started</strong></p>
        </div>
       </a>
      </div>
    </div>

  </main>
  <!--JavaScript-->
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

</body>
</html>

谢谢

【讨论】：

【解决方案3】：

请不要固定卡片的宽度。使用style="width: auto;" 而不是style="width: 18rem;" 这将解决您的问题

<!DOCTYPE html>
<html lang="en">

<body>
  <main>
    <!--Cards-->
    <div class="card-deck mx-auto">
      <!--Games Card-->
      <div class="card text-center text-white bg-dark mb-3 d-flex" style="width: auto;">
        <a href="#">
          <img src="../img/games.png" class="card-img-top" alt="Games">
          <div class="card-body">
            <p class="card-text"><strong>Games</strong></p>
          </div>
        </a>
      </div>
      <!-- Consoles Card-->
      <div class="card text-center text-white bg-dark mb-3" style="width: auto;">
        <a href="##">
          <img src="../img/consoles.png" href="#" class="card-img-top" alt="Consoles">
          <div class="card-body">
            <p class="card-text"><strong>Consoles</strong></p>
          </div>
        </a>
      </div>
      <!-- Getting Started Card-->
      <div class="card text-center text-white bg-dark mb-3" style="width: auto;">
        <a href="###">
          <img src="../img/gettingStarted.png" href="#" class="card-img-top" alt="Getting Started">
          <div class="card-body">
            <p class="card-text"><strong>Getting Started</strong></p>
          </div>
        </a>
      </div>
    </div>

  </main>
  <!--JavaScript-->
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

</body>

</html>

【讨论】：

请接受这个作为接受的答案：) @ScottWilks