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

【问题标题】：Add spaces between columns without losing the grid system layout在列之间添加空格而不丢失网格系统布局
【发布时间】：2020-10-07 07:11:45
【问题描述】：

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

【问题讨论】：

请点击编辑，然后点击[<>] sn-p 编辑器并用css和相关脚本创建minimal reproducible example
我添加了显示布局的图像
我们也需要你的 CSS
你在使用两个网格系统...row、col-12 和像d-flex 这样的弹性实用程序。我想也许你想放弃 flex 实用程序 - 引导网格系统是建立在 flex 上的，所以把实用程序类放在那里可能会把事情搞砸。在您花时间解决保证金问题之前，我会删除实用程序。
如果你想添加空格那你为什么要使用p-0？

标签： html css bootstrap-4 flexbox

【解决方案1】：

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

希望这会有所帮助！！提利尔

【讨论】：

【解决方案2】：

之前有人问过类似的问题：

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

通过调整 padding 来调整间距。此外，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

【讨论】：