减少 bootstrap 4 卡列间距

Question

我有一个包含 8 张卡片的引导列，几乎可以从 getbootstrap (https://getbootstrap.com/docs/4.1/components/card/#card-columns) 中创建那种“砌体”效果——不过，我只在 JSFiddle 示例中使用了一个在线图像，并且我删除了卡片标题等。 ..我的问题是：我想将缩略图之间的间距（间隙）减少到大约 2 像素，但它似乎根本不起作用。我尝试将“classic_thumbnails”样式放在所有 div 中，我尝试添加 p-1 和 m-1，似乎没有任何效果，并且如“classic_gallery”样式中所表达的那样，角落（边框半径）仍然是圆形的，这我要犀利……

HTML

<div class="container"> 

<div class="card-columns">
  <div class="card classic_thumbnails">
    <img class="card-img" src="https://i.imgur.com/8v9vYpl.png" alt="Card 
     image">
  </div>
  <div class="card classic_thumbnails">
    <img class="card-img" src="https://i.imgur.com/8v9vYpl.png" alt="Card 
image">
  </div>
  <div class="card classic_thumbnails">
    <img class="card-img" src="https://i.imgur.com/8v9vYpl.png" alt="Card 
image">
  </div>
   <div class="card classic_thumbnails">
    <img class="card-img" src="https://i.imgur.com/8v9vYpl.png" alt="Card 
image">
  </div>
  <div class="card classic_thumbnails">
    <img class="card-img" src="https://i.imgur.com/8v9vYpl.png" alt="Card 
image">
  </div>
  <div class="card classic_thumbnails">
    <img class="card-img" src="https://i.imgur.com/8v9vYpl.png" alt="Card 
image">
  </div>
  <div class="card classic_thumbnails">
    <img class="card-img" src="https://i.imgur.com/8v9vYpl.png" alt="Card 
 image">
  </div>
   <div class="card classic_thumbnails">
    <img class="card-img" src="https://i.imgur.com/8v9vYpl.png" alt="Card 
image">
  </div>
</div>  

</div>  

这是 CSS（html 文件也包含指向 Bootstrap CDN 的链接：

.classic_thumbnails {
border-radius: 0px;
margin: 1px;
padding: 1px;
border: 1px;
border-color: #000000;

}

任何帮助将不胜感激，这里是小提琴：https://jsfiddle.net/JodyTerblanche/4v96p8k1/13/#&togetherjs=PoFRaqJ9xr

Answer 1

要编辑间距，您必须覆盖 .card-columns 类的 CSS。下面我把column-gap: 1.25rem;的间距缩小到column-gap: 1.25rem;

.card-columns {
    column-gap: 0.25rem;
}

要删除尖角的边框半径，您需要覆盖 .card-img 以删除 border-radius。

像这样：

.card-img {
    border-radius: 0;
}

您的课程 .classic_thumbnails 正在将您的 CSS 添加到外部 div 的包装图像中。

你的小提琴：https://jsfiddle.net/8q20m1et/