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

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

希望这会有所帮助！！图案

Answer 2

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

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

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

2 个答案: