Bootstrap的div之间的边距

Question

我用bootstrap样式做了一个网格，但是当我使用col-sm- *时，div非常接近，我放在它们上面的shadow效果丢失了，我在div上加了一个边距，但是最后一个div被解散了，它掉了，这不是我想要的，我已经看到它可以用border属性来伪装，这个属性等于父div的背景色，但这个属性我用来做其他事情。我考虑过使用outline属性，看看是否可以伪装该属性，使其呈现背景颜色，但我仍然不知道它是如何工作的。我留下了一个片段，说明它在没有边际和有边际的情况下是什么样子。

我搜索了一下，很多帖子都是用边界属性解决的，再一次，我在用边界做别的事情。

​

<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

您可以使用内部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>

​

Answer 2

我同意奇勒的观点。

另一种解决方案是将引导程序的col-sm-4宽度从

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

至

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

(或更小)，并在外部row中设置justify-content: between

​

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

​