Question

我有一个带有8张卡的引导程序列，几乎可以通过getbootstrap（https://getbootstrap.com/docs/4.1/components/card/#card-columns）来创建“砌体”效果-尽管我仅使用一个在线图像作为JSFiddle示例，但是我删除了卡头等等...我的问题是：我想将缩略图之间的间距（间隙）减小到大约2像素，但似乎根本不起作用。我尝试在所有div中放置“ classic_thumbnails”样式，尝试添加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/

减少引导程序4卡栏间距

1 个答案: