Bootstrap布局在插入空间时出错

Question

我所需要的只是在列之间放置填充或边距。

如果我在CSS中设置它，列会崩溃。

代码html和css在这里：

https://codeshare.io/2pwRPz

无边距，三列，可以，但没有空格：

使用CSS边距，不正确：

我的CSS，请取消注释该CSS以查看问题

Answer 1

由于您要应用的边距留有余量，所以要转到下一行-要获得所需的空间-您需要做的就是在col-md-4内插入卡，然后将填充物放在div上，这样卡之间会有空间，但仍保留在引导程序布局内。

//css 
.cards-postagens-wrapper {
  padding: 15px;
}

.cards-postagens {
    background-color: #d4ecd6;
    height: 9em;
    text-align: left;
    border-radius: 8px;
  }

//html
    <div class="col-sm-12 col-md-4 cards-postagens-wrapper">
      <div class="cards-postagens">
        <div class="badge badge-primary badge-postagens">categoria blog</div>
         <div>12 a column here</div>
        </div>
    </div>

这由以下代码段演示。

.cards-postagens-wrapper  {
  padding: 15px;
 }
 
.cards-postagens {
    background-color: #d4ecd6;
    height: 9em;
    text-align: left;
    border-radius: 8px;
}

.badge-postagens {
    margin-top: 2%;
    margin-left: 2%;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

    <!-- jQuery library -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

    <!-- Latest compiled JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
    
<div class="container" id="corpo-pagina">
  <div class="container-fluid" id="corpo-pagina-conteudo">
    <div class="row">
      <div class="col-xs-4 col-sm-4 col-md-4 cards-postagens-wrapper">
      <div class="cards-postagens">
        <div class="badge badge-primary badge-postagens">
            categoria blog
         </div>
         <div>11 a column here</div>
       </div>
      </div>
      <div class="col-xs-4 col-sm-4 col-md-4 cards-postagens-wrapper">
      <div class="cards-postagens">
        <div class="badge badge-primary badge-postagens">
            categoria blog
         </div>
         <div>11 a column here</div>
       </div>
      </div>
      <div class="col-xs-4 col-sm-4 col-md-4 cards-postagens-wrapper">
      <div class="cards-postagens">
        <div class="badge badge-primary badge-postagens">
            categoria blog
         </div>
         <div>11 a column here</div>
       </div>
      </div>
    </div>