时间戳

首页 > 解决方案 > 减少 bootstrap 4 卡列间距

bootstrap-4 - 减少 bootstrap 4 卡列间距

问题描述

我有一个包含 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

标签： bootstrap-4

解决方案

要编辑间距，您必须覆盖 class 的 CSS .card-columns。下面我将间距从减少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/

推荐阅读