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

Question

我想在列之间添加空格而不丢失网格系统布局，当我向卡片添加边距时，布局变成 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>

Answer 1

以前曾问过类似的问题:

Spacing & sizing columns using Bootstrap 4
Bootstrap: add margin/padding space between columns

通过调整内边距来调整间距。此外，card 应该位于列内，并且列始终位于 row 内。例如，这里 px-4 增加了间距:

<div class="row">  
    <div class="col-12 col-lg-3">
        <div class="card">
            <img src="#"> [i write the title here]<p> .... </p>
        </div>
    </div>
    <div class="px-4 col-12 col-lg-3">
        <div class="card">
            <img src="#">
            <p> .... </p>
        </div>
    </div>
    <div class="px-4 col-12 col-lg-3">
        <div class="card">
            <img src="#">
            <p> .... </p>
        </div>
    </div>
    <div class="col-12 col-lg-3">
        <div class="card">
            <img src="#">
            <p> .... </p>
        </div>
    </div>
</div>

Demo