放置保证金时引导列不起作用

Question

我有两行，每一行都用col-sm-6. 只要我保持代码不变，列就可以工作，但各个部分都粘在一起；所以，当我尝试通过设置给他们一些余量时

.col-sm-6 { margin: 15px; }

在 CSS 中，列断开并垂直划分。不管我放什么样的保证金，它总会给我同样的问题。除此之外，我尝试了其他一些可能的解决方案，但仍然无法解决。我究竟做错了什么？

<div class="container">

<div class="row">
  <div class="col-sm-6 categories" style="background-image: url(https://source.unsplash.com/category/nature/1600x900);">
   <div class="opacity-overlay">
     <h2>Section 1</h2>
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
   </div>
 </div>

 <div class="col-sm-6 categories" style="background-image: url(https://source.unsplash.com/category/food/1600x900);">
   <div class="opacity-overlay">
     <h2>Section 2</h2>
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
   </div>
  </div>
</div>


<div class="row">
  <div class="col-sm-6 categories" style="background-image: url(https://source.unsplash.com/category/people/1600x900);">
   <div class="opacity-overlay">
     <h2>Section 3</h2>
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
   </div>
 </div>

 <div class="col-sm-6 categories" style="background-image: url(https://source.unsplash.com/category/Objects/1600x900);">
   <div class="opacity-overlay">
     <h2>Section 4</h2>
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
   </div>
  </div>
</div>

</div>

这是CSS：

.categories {
  text-align: center;
  background-position: center center;
  background-size: cover;
  color: black;
  padding: 50px;
}

.opacity-overlay {
  background: rgba(255, 255, 255, 0.85);
  padding: 1px 20px 10px 20px;
}

Answer 1

事实上，引导网格系统需要接管您的margin-left属性margin-right才能工作。如果您覆盖这些内容，它将无法按预期工作。两种可能的解决方案：

1. 如果您只想查找垂直间距，请使用margin-top或margin-bottom而不是margin。

2. 把你的放在<div class="container">你的里面<div class="cols-xs-6">。然后，边距将应用于列 div 范围内的容器。