从 Bootstrap 4 卡中删除多余的 space

Question

我正在使用来自Bootstrap 4的卡class，但是还有一个额外的权利space 摆脱不了:

（忽略 'porno' 的东西，呵呵）。

如你所见，还有额外的权利space。

我正在尝试使用此代码摆脱它：

 .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中的列类型决定。这个宽度为 33.33%。每个断点的像素数量不同。目前您的专栏持有一张卡片 div。此卡 div 占列 div 的 80%。由于它默认位于左侧，因此剩余的 20% 显示在右侧。将 margin: 0 auto; 添加到卡片 CSS 将 div 置于其父卡片的中心。另一种解决方案是在卡片 div 上使用 100% 的宽度（添加 width: 100% 并删除 width: 80%!important），使其填满整个列。

Answer 2

添加 bootstrap class“无排水沟”帮助我删除了：

div class="row no-gutters"

从 Bootstrap 4 卡中删除多余的 space

Remove extra space from a Bootstrap 4 Card

html

css

twitter-bootstrap

twitter-bootstrap-4