Question

我对此进行了广泛的研究，无济于事。我正在使用以下代码在其下方输出屏幕截图，但是在移动设备上查看时，它向左移动。

有人可以帮我吗？预先感谢！

<div class="container">
    <div class="row g-mb-20">
      <div class="col-md-6 col-lg-3 g-mb-50 justify-content-center">
        <div class="card" style="width: 18rem;">
        <img src="assets/img/calisurf1.jpg" class="card-img-top" alt="...">
          <div class="card-body">
          <h5 class="card-title">Card title</h5>
          <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
          <a href="#" class="btn btn-primary">Go somewhere</a>
          </div>
        </div>
      </div>
      <div class="col-md-6 col-lg-3 g-mb-50 justify-content-center">
        <div class="card" style="width: 18rem;">
        <img src="assets/img/calisurf1.jpg" class="card-img-top" alt="...">
          <div class="card-body">
          <h5 class="card-title">Card title</h5>
          <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
          <a href="#" class="btn btn-primary">Go somewhere</a>
          </div>
        </div>
      </div>
      <div class="col-md-6 col-lg-3 g-mb-50 justify-content-center">
        <div class="card" style="width: 18rem;">
        <img src="assets/img/calisurf1.jpg" class="card-img-top" alt="...">
          <div class="card-body">
          <h5 class="card-title">Card title</h5>
          <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
          <a href="#" class="btn btn-primary">Go somewhere</a>
          </div>
        </div>
      </div>
      <div class="col-md-6 col-lg-3 g-mb-50 justify-content-center">
        <div class="card" style="width: 18rem;">
        <img src="assets/img/calisurf1.jpg" class="card-img-top" alt="...">
          <div class="card-body">
          <h5 class="card-title">Card title</h5>
          <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
          <a href="#" class="btn btn-primary">Go somewhere</a>
          </div>
        </div>
      </div>
    </div>
  </div>

Desktop Version

Mobile Version

Answer 1

您只需要将类d-flex添加到columns容器（您已经拥有类justify-content-center的容器）中：

<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.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>


<div class="container">
<div class="row">

  <div class="col-md-6 col-lg-3 mb-5 d-flex justify-content-center">
    <div class="card w-100">
      <img src="https://via.placeholder.com/50" class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
        <a href="#" class="btn btn-primary">Go somewhere</a>
      </div>
    </div>
  </div>
  
  <div class="col-md-6 col-lg-3 mb-5 d-flex justify-content-center">
    <div class="card w-100">
      <img src="https://via.placeholder.com/50" class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
        <a href="#" class="btn btn-primary">Go somewhere</a>
      </div>
    </div>
  </div>

  <div class="col-md-6 col-lg-3 mb-5 d-flex justify-content-center">
    <div class="card w-100">
      <img src="https://via.placeholder.com/50" class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
        <a href="#" class="btn btn-primary">Go somewhere</a>
      </div>
    </div>
  </div>
  
  <div class="col-md-6 col-lg-3 mb-5 d-flex justify-content-center">
    <div class="card w-100">
      <img src="https://via.placeholder.com/50" class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
        <a href="#" class="btn btn-primary">Go somewhere</a>
      </div>
    </div>
  </div>
  
</div>
</div>

引导卡-在移动设备上查看时居中问题

1 个答案: