放置边距时引导列不起作用答案

【问题标题】：Bootstrap Columns not working when putting Margin放置边距时引导列不起作用
【发布时间】：2017-09-10 23:38:16
【问题描述】：

我有两行，每行分为两列，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;
}

【问题讨论】：

stackoverflow.com/questions/24340293/bootstrap-grid-margin

标签： html css twitter-bootstrap twitter-bootstrap-3 multiple-columns

【解决方案1】：

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

如果您只寻找垂直间距，请使用margin-top 或margin-bottom 而不是margin。
将您的<div class="container"> 放入您的<div class="cols-xs-6">。然后边距将应用于列 div 范围内的容器。

【讨论】：

1.我已经尝试只输入margin-top 和margin-bottom 看看它是否给我同样的问题，但它没有，但我也需要margin-left 和margin-right，它们正是导致问题。
尝试方法2。
2.几分钟前我试过这个，它没有给我同样的问题，但结果更糟。
我想帮忙，但我无法调试“更糟”。尽管如此，我还是推荐方法 2：让引导程序的列类为您工作而不添加样式，但用您自己的类的 div 填充它们，您可以根据需要设置样式。我不知道您在进行转换时对什么不满意，但您可能应该期望必须对包含的类进行一些样式调整。如果您需要特定的外观，也许您应该按照这些思路提出第二个问题。

【解决方案2】：

我通过给 col border: 10px solid colour 解决了同样的问题颜色与background-colour相同

你也可以这样做：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 row-cols-lg-4 row-cols-xl-5 py-3">
    <div class='col'>
      <div class="opacity-overlay">
        <h2>Section 1</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
      </div>
    </div>
  </div>
</body>

</html>

【讨论】：

【解决方案3】：

Try Using this

<div class = "row">
  <div class = "col-sm-6">
     <div class = "col-sm-12">
        Your Content 
     </div>
  </div>
  <div class = "col-sm-6">
     <div class = "col-sm-12">
        Your Content 
     </div>
  </div>
</div>

【讨论】：