поле между Div Bootstrap

Question

Я делаю сетку со стилями начальной загрузки, однако, когда я использую col-sm- *, дивы очень близки друг к другу, и эффект shadow, который я на них надеваю, теряется, я наложил поле на div но последнее div расформировано и сбивается, это не то, что я имел в виду, я видел, что его можно замаскировать свойством border, равным цвету фона родительского div, но это собственность я использую для других вещей. Я думал об использовании свойства outline, чтобы посмотреть, смогу ли я замаскировать это свойство, чтобы оно приняло цвет фона, но я до сих пор не знаю, как оно работает. Я оставляю фрагмент того, как это выглядит без полей и с полями.

Я искал на SO, и многие посты решаются с помощью свойства border, опять же, я использую border для других вещей.

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

<div class="container">
  <div class="row">
    <div class="col-sm-4 shadow p-5 bg-light border">
      COSILLAS
    </div>
    
    <div class="col-sm-4 shadow p-5 bg-light border">
      COSILLAS
    </div>
    
    <div class="col-sm-4 shadow p-5 bg-light border">
      COSILLAS
    </div>
  </div>
</div>
<hr>
<div class="container">
  <div class="row">
    <div class="col-sm-4 shadow p-5 bg-light border m-1">
      COSILLAS
    </div>
    
    <div class="col-sm-4 shadow p-5 bg-light border m-1">
      COSILLAS
    </div>
    
    <div class="col-sm-4 shadow p-5 bg-light border m-1">
      COSILLAS
    </div>
  </div>
</div>

Answer 1

Я согласен с Чиллером.

Еще одно решение - изменить ширину Bootstrap col-sm-4 с

flex: 0 0 33.333333%;
max-width: 33.333333%;

до

flex: 0 0 32.333333%;
max-width: 32.333333%;

(или меньше) и установите justify-content: between во внешнем row

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<style>
  .col-sm-4 {
    -ms-flex: 0 0 32.333333%;
    flex: 0 0 32.333333%;
    max-width: 32.333333%;
  }
</style>

<div class="container">
  <div class="row justify-content-between">
    <div class="col-sm-4 shadow p-5 bg-light border">
      COSILLAS
    </div>
    
    <div class="col-sm-4 shadow p-5 bg-light border">
      COSILLAS
    </div>
    
    <div class="col-sm-4 shadow p-5 bg-light border">
      COSILLAS
    </div>
  </div>
</div>

Answer 2

Вы можете использовать внутренний div и использовать отступы, как показано ниже:

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

<div class="container">
  <div class="row">
    <div class="col-sm-4 p-2">
      <div class="shadow p-5 bg-light border">
        COSILLAS
      </div>
    </div>
    <div class="col-sm-4 p-2">
      <div class="shadow p-5 bg-light border">
        COSILLAS
      </div>
    </div>
    <div class="col-sm-4 p-2">
      <div class="shadow p-5 bg-light border">
        COSILLAS
      </div>
    </div>

  </div>
</div>