Question

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

我通过给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>

`

Answer 2

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

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

Answer 3

./gradlew clean

放入保证金时Bootstrap列不起作用

3 个答案: