我试图弄清楚在较小的屏幕(移动，平板电脑)上查看时如何删除顶级

Question

我正在使用bootstrap并具有布局。我有一个带4列的行，我的内容与每个Div具有不同的最高边距。这会产生级联效果，并在桌面上看起来不错。问题在于，当在较小的屏幕上查看时，保证金保留在内容之间。我希望divs堆叠在一起，它们之间有一个很小的（10px）空间。我曾尝试使用CSS并尝试添加@Media，但仍然有很大的空间。

这是HTML：

<div class="container" style='min-height:600px'><br>
    <div class='row'>
        <div class='col-sm-3' id='col-1'>
            <div class='col-1-box'></div>
        </div>
        <div class='col-sm-3' id='col-2'>
            <div class='col-2-box'></div>
        </div>
        <div class='col-sm-3' id='col-3'>
            <div class='col-3-box'></div>
        </div>
        <div class='col-sm-3' id='col-4'>
            <div class='col-4-box'></div>
        </div>
    </div>
</div>

这是更新的CSS：

<style>
@media only screen and (max-width: 600px) {
  .col-1-box, .col-2-box, .col-3-box, .col-4-box {
    margin-top: 3%;
  }
}
#col-1{
    background-color:;
}
#col-2{
    background-color:;
}
#col-3{
    background-color:;
}
#col-4{
    background-color:;
}
.col-1-box{
    margin-top:0%;
    padding:0px 10px 0 10px;
    min-height:400px;
    background-color:white;
    box-shadow: 2px 4px 7px -2px #6E6E6E;
}
.col-2-box{
    margin-top:25%;
    padding:0px 10px 0 10px;
    min-height:400px;
    background-color:white;
    box-shadow: 2px 4px 7px -2px #6E6E6E;
}
.col-3-box{
    margin-top:50%;
    padding:0px 10px 0 10px;
    min-height:400px;
    background-color:white;
    box-shadow: 2px 4px 7px -2px #6E6E6E;
}
.col-4-box{
    margin-top:75%;
    padding:0px 10px0 10px;
    min-height:400px;
    background-color:white;
    box-shadow: 2px 4px 7px -2px #6E6E6E;
}
</style>

Answer 1

您只需要在CSS中添加媒体查询，以更改移动设备上的填充。

@media only screen and (max-width: 600px) {
  .col-2-box, .col-3-box, .col-3-box, .col-4-box {
    margin-top: 10px;
  }
}

您的.col-4-box样式中也有错字。将填充更改为padding:0px 10px 0 10px;

Answer 2

内容之间的大型GAB，它会导致min-height，因此请尝试将其设置为零，将margin-top设置为10px。尝试这个

@media (min-width: 481px) and (max-width: 767px) {
  #col-1, #col-2, #col-3, #col-4{
    min-height:0px;
  }
  .col-2-box, .col-3-box, .col-4-box{
    margin-top: 10px;
  }
}

    #col-1{
        background-color:;
        min-height:500px;
    }
    #col-2{
        background-color:;
        min-height:500px;
    }
    #col-3{
        background-color:;
        min-height:500px;
    }
    #col-4{
        background-color:;
        min-height:500px;
    }
    .col-1-box{
        margin-top:0%;
        padding:0px 10px 0 10px;
        min-height:200px;
        background-color:white;
        box-shadow: 1px 1px 3px #6E6E6E;
    }
    .col-2-box{
        margin-top:25%;
        padding:0px 10px 0 10px;
        min-height:200px;
        background-color:white;
        box-shadow: 1px 1px 3px #6E6E6E;
    }
    .col-3-box{
        margin-top:50%;
        padding:0px 10px 0 10px;
        min-height:200px;
        background-color:white;
        box-shadow: 1px 1px 3px #6E6E6E;
    }
    .col-4-box{
        margin-top:75%;
        padding:0px 10px0 10px;
        min-height:200px;
        background-color:white;
        box-shadow: 3px 3px 8px -4px #6E6E6E;
    }
    
    @media (min-width: 481px) and (max-width: 767px) {
      #col-1, #col-2, #col-3, #col-4{
        min-height:0px;
      }
      .col-2-box, .col-3-box, .col-4-box{
        margin-top: 10px;
      }
    }

<div class="container" style='min-height:600px'>
    <br>
    <div class='row'>
        <div class='col-sm-3' id='col-1'>
            <div class='col-1-box'></div>
        </div>
        <div class='col-sm-3' id='col-2'>
            <div class='col-2-box'></div>
        </div>
        <div class='col-sm-3' id='col-3'>
            <div class='col-3-box'></div>
        </div>
        <div class='col-sm-3' id='col-4'>
            <div class='col-4-box'></div>
        </div>
    </div>
</div>