时间戳

首页 > 解决方案 > 在列之间添加空格而不丢失网格系统布局

html - 在列之间添加空格而不丢失网格系统布局

问题描述

我想在不丢失网格系统布局的情况下在列之间添加空格，当我向卡片添加边距时，布局变为 3 张卡片而不是 4 张卡片

这是代码，问题是我无法控制卡片之间的间距，每行应该是四张卡片

 <div class ="container">
  <div class ="row">
    <div class ="d-flex flex-wrap">
        <div class ="card p-0 col-12 col-lg-3">
           <img src = "#">
           [i write the title here]<p> .... </p>
        </div>
         <div class ="card p-0 col-12 col-lg-3">
           <img src = "#">
           <p> .... </p>
        </div>
        <div class ="card p-0 col-12 col-lg-3">
           <img src = "#">
           <p> .... </p>
        </div>
        <div class ="card p-0 col-12 col-lg-3">
           <img src = "#">
           <p> .... </p>
        </div>
    </div>
  </div>
 </div>

<style>
.card img{
width:100%;
}
..card p{
width:100%;
color : green;
font-size :18px;
float:right
}
</style>

标签： htmlcssbootstrap-4flexbox

解决方案

由于我们看不到您的所有 CSS，我不知道这是否确定，但请尝试使用grid-row-gapandgrid-column-gap来表示行间距和列间距。您还可以使用grid-template-columns来指定所需的列数。

希望这可以帮助！！蒂列尔

推荐阅读