Question

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

我尝试使用d-flex和justify-content-center，如先前答案中所建议的那样，无济于事。

我注意到向每个卡片类添加mx-auto可以使它们居中，但是使用此方法也可以消除卡片之间的间隙。

请访问我的网站https://www.python.org/downloads/release/python-3410/。

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

这是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，请帮忙！

Answer 1

请不要固定卡的宽度。使用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>

Answer 2

如果将 align-items-center 类放在卡片组父级div中，则可以获得中心卡片。

<!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>

谢谢

Answer 3

一种非常简单的方法是将margin:0 auto;添加到卡片组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>

在移动视图中居中引导卡

3 个答案: