Bootstrap v4 - 对齐卡片，删除额外空间[重复]

Question

基本上我想要一个卡片/瓷砖布局。我尝试了 Bootstrap 4 的 Card-Columns 示例，结果如下：

<main role="main" class="container-fluid free">
  <div class="card-columns">
    <div class="card" style="width:60%;">
      <div class="card-body">
        <h5 class="card-title">Test1</h5>
        <p class="card-text">test</p>
      </div>
    </div>
    <div class="card">
      <div class="card-body">
        <h5 class="card-title">Test2</h5>
      </div>
    </div>
  </div>
</main><!-- /.container -->

现在我想删除页面上两张卡片之间的空间。这可以通过卡在 Bootstrap 中实现吗？我可以拥有一个带有自定义卡片宽度的平铺布局，这一点非常重要。

这是一个小提琴的链接：JSFiddle 提前致谢。

Answer 1

试试这个

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<main role="main" class="container-fluid free">
 
  <div class="card-columns row">
   <div class="col">
   <div class="card">
      <div class="card-body">
        <h5 class="card-title">Test1</h5>
        <p class="card-text">test</p>
      </div>
    </div>
  </div>
    <div class="col">
    <div class="card">
      <div class="card-body">
        <h5 class="card-title">Test2</h5>
      </div>
    </div>
    </div>
    
  </div>
</main>
<!-- /.container -->