Question

我正在使用自举样式进行网格处理，但是当我使用col-sm- *时，div非常靠近，并且对它们施加的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

您可以使用内部div并在下面的代码段中使用填充

factory constructor

Answer 2

我同意Chiller。

另一种解决方案是将引导程序的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>

Bootstrap的div之间的边距

2 个答案: