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

【问题标题】：Bootstrap Cards - issue with centering when viewed on mobile device引导卡 - 在移动设备上查看时出现居中问题
【发布时间】：2019-06-13 04:30:46
【问题描述】：

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

谁能帮我解决这个问题？提前致谢！

<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

【问题讨论】：

• 您应该添加 col-12，以便它在移动设备上占据整个屏幕
• 添加 col-12 或 col-sm-12 不会使卡片全宽。真的很感激这个想法，并希望这能发生。
• 是的，我的错。我认为您的 style="width: 18rem" 导致了这个问题。
• 就是这样，谢谢！每个边缘都有一点边距，但我认为负边距可以解决这个问题，或者可能是“容器流体”。默认情况下可能是 Bootstrap 的排水沟。