在列之间添加空格而不会丢失网格系统的布局 [英] Add spaces between columns without losing the grid system layout

问题描述

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

I want to add spaces between columns without losing the grid system layout , when I add margin to the card the layout become 3 cards not 4

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

here is the code , the problem is that i can't control the spacing between cards and it should be four cards in every row

 <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>

推荐答案

以前也曾问过类似的问题:

Similar questions have be asked before:

间距&使用Bootstrap 4调整列的大小
引导程序:在列之间添加页边距/填充空间

通过调整填充来调整间距.同样，card应该在列内部，并且列始终在row内部.例如，这里px-4增加了间距:

Adjust the spacing by adjusting the padding. Also, card should be inside columns and columns are always inside row. For example, here px-4 increases the spacing:

<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>

演示

这篇关于在列之间添加空格而不会丢失网格系统的布局的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！