从Bootstrap 4卡中删除多余空间

Question

我正在使用 Bootstrap 4 中的卡类，但是我还有一个额外的权利空间我无法摆脱：

（忽略＆＃39;色情＆＃39;事情，呵呵）。

正如您所看到的，还有额外的正确空间。

我试图用这段代码摆脱它：

 .card{
     width: 80% !important;
     background-color: black;


 }


 .card-block{
    color: white !important;

 }

 #card-div{
     padding-bottom: 10px;
     padding-right: -10px !important;

 }

 #card-div > a{
     text-decoration: none;
 }

HTML代码（也使用Jekyll）：

<div class="col-sm-8" id="main-content">

  <div class="row">

    {% for post in site.posts%}
    <div class="col-sm-4" id="card-div">
      <a target="_blank" href=" {{post.url}} ">
        <div class="card">
          <img class="card-img-top" src="../media/logo-prueba.jpg">
          <div class="card-block">
            <h5 class="card-title text-center">{{ post.title }}</h5>
            <p class="card-text">{{ post.category }}</p>
          </div>
        </div>
      </a>
    </div>
    {% endfor %}

  </div>

</div>

它不起作用。

任何帮助？

Answer 1

列元素的宽度由CSS中的col-type决定。这个宽度为33.33％。每个断点的像素数量不同。目前，您的专栏中有一个卡片div。此卡div是列div的80％。由于默认为左侧，剩余的20％显示在右侧。将margin: 0 auto;添加到卡片CSS中将div放在其父级中心。另一种解决方案是在卡片div上使用100％的宽度（添加width: 100%并删除width: 80%!important），使其填满整个列。

Answer 2

添加引导程序类“没有装订线”有助于删除该内容：

div class="row no-gutters"