html - 如何删除 cards bootstrap 4 中的多余空间

Question

所以我一直在努力弄清楚这个问题。我似乎无法使卡片在此部分内水平居中，当我检查检查元素时，结果发现卡片占用了一些额外的空间，这并不是真正的填充或边距。在这方面急需帮助。我只是使用了 bootstrap grid，目标是让卡片水平居中。

#products
{
    @include sectionDefaultValues();
    #products-txt-cont
    {
        background-color: $siteColor;
        padding: 15px;
    }
    #products-txt
    {
        color: white;
    }
}

<section id="products">
  <div id="products-txt-cont">
    <h2 id="products-txt">PRODUCTS AND SERVICES</h2>
  </div>
  <div class="container3">
    <div class="row">
      <div class="col col-4">
        <div class="card" style="width: 18rem;" data-toggle="modal" data-target="#modalone">
          <img src="..." 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 class="modal" tabindex="-1" role="dialog" id="modalone">
            <div class="modal-dialog-centered" role="document">
              <div class="modal-content">
                <div class="modal-header">
                  <h5 class="modal-title">Modal title</h5>
                  <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                            <span aria-hidden="true">&times;</span>
                                          </button>
                </div>
                <div class="modal-body">
                  <p>Modal body text goes here.</p>
                </div>
                <div class="modal-footer">
                  <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                </div>
              </div>
            </div>
          </div>
        </div>

      </div>
      <div class="col col-4">
        <div class="card" style="width: 18rem;" data-toggle="modal" data-target="#modaltwo">
          <img src="..." 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 class="modal" tabindex="-1" role="dialog" id="modaltwo">
            <div class="modal-dialog-centered" role="document">
              <div class="modal-content">
                <div class="modal-header">
                  <h5 class="modal-title">Modal title</h5>
                  <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                                <span aria-hidden="true">&times;</span>
                                            </button>
                </div>
                <div class="modal-body">
                  <p>Modal body text goes here.</p>
                </div>
                <div class="modal-footer">
                  <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="col col-4">
        <div class="card" style="width: 18rem;" data-toggle="modal" data-target="#modalthree">
          <img src="..." 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 class="modal" tabindex="-1" role="dialog" id="modalthree">
            <div class="modal-dialog-centered" role="document">
              <div class="modal-content">
                <div class="modal-header">
                  <h5 class="modal-title">Modal title</h5>
                  <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                                <span aria-hidden="true">&times;</span>
                                            </button>
                </div>
                <div class="modal-body">
                  <p>Modal body text goes here.</p>
                </div>
                <div class="modal-footer">
                  <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>

Answer 1

我想通了，哈哈，只需要将 mx-auto 类添加到卡片中