Question

如何使左块高于右块并消除它们之间的距离？这是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>

在移动版本中，这些块是响应性的，并且相互响应。问题是我无法消除它们之间的距离。我该怎么解决？

Answer 1

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

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

Answer 2

只需从.cnt类中删除margin-top:20px;margin-bottom:10px;即可！这是主要问题

Answer 3

您应该使用引导程序类来删除块之间的填充和边距：

https://getbootstrap.com/docs/4.3/utilities/spacing/

我在您的代码类中添加了 pr-md-0和pl-md-0 mr-md-0和ml-md-0 是什么意思：

pr-md-0 （中等设备等于0的右填充）

pl-md-0 （中等设备的左侧填充为0）

mr-md-0 （中等设备的边距等于0）

ml-md-0 （中等设备的剩余边距等于0）

此更改是针对它们之间的左右空间，但是如果您想摆脱顶部和底部的空间，则可以添加示例的其他类： mt-0 mb-0 pt-0 pb-0

什么意思：

mt-0 -页边距为0

pt-0 -将顶部填充到0

mb-0 -下限为0

pb-0 -将底部填充到0

对于每个块的不同高度，应提供不同的类，而不要使用同一类 cnt ，例如，添加 cnt1 和 cnt2 类，例如下面的示例：

<!DOCTYPE html>

<html>
    <head>

    <style>
    .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 {
    padding: 30px;
  }
  .cnt1 {
    height: 552px;
  }

  .cnt2 {
    height: 452px;
  }
}
@media all and (max-width: 1170px) {
  .cnt1 {
    height: 480px;
  }

  .cnt2 {
    height: 380px;
  }
 }
    </style>
    </head>
    <body>

    <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="container">
        <div class="row">
            <div class="col-md-6  col-xs-12 mr-md-0 pr-md-0 ">
          <div class="cnt cnt1 mb-0 mt-md-4">

          </div>
        </div>                                                                 

        <div class="col-md-6  col-xs-12 ml-md-0 pl-md-0 ">
          <div class="cnt cnt2 mt-0 mt-md-4">

          </div>
        </div>  
        </div>
    </div>  
</body>
</html>

关于边距和填充

Answer 4

更改此CSS，然后删除块之间的距离：

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

如何消除块之间的距离

4 个答案: