Неправильная схема начальной загрузки при вставке пробела

Question

Все, что мне нужно, это поместить отступы или поля между столбцами.

Если я установлю его в css, столбцы будут разбиты.

Код html и css находится здесь:

https://codeshare.io/2pwRPz

Без поля, 3 столбца, нормально, но без пробела:

С полем css, не в порядке:

Мой CSS, раскомментируйте этот CSS, чтобы увидеть проблему

Answer 1

Это перерыв на следующую строку из-за оставшегося поля, которое вы применяете - чтобы получить желаемое пространство - вам нужно вставить карты WITHIN в 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>