html - 如何删除 block 之间的距离

Question

我有这些积木。 enter image description here

如何让左边的方 block 高于右边的方 block 并消除它们之间的距离？这是 CSS:

.cnt {
  padding:20px;
  margin-top:20px;
  margin-bottom:10px;
  background: rgba(255, 255, 255, .5);
  overflow:hidden;
  box-shadow: 0 10px 90px rgba(0, 0, 0, 0.4);
}

@media only screen and (min-width : 480px) {
  .cnt {
    height: auto;
  }
}

@media only screen and (min-width : 768px) {
  .cnt {
    height: 452px;
    padding: 30px;
  }
}    
@media all and (max-width: 1170px) {
    .cnt {
        height: 380px;
    }
}

这是 html:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<div class="col-md-6  col-xs-12">
  <div class="cnt"></div>
</div>                                   
<div class="col-md-6  col-xs-12">
  <div class="cnt"></div>
</div>  

这些 block 是响应式的，并且在移动版本中彼此重叠。问题是我无法消除它们之间的距离。我该如何解决？

Answer 1

您可以像这样覆盖默认的 Bootstrap css，默认情况下类 col-md-6 和 col-xs-12 将具有填充和边距，这会导致您正在谈论的距离。并且还从 .cnt 类中删除边距:-

.col-md-6, .col-xs-12{
   padding: 0 !important;
   margin: 0 !important;
}