html - 我试图弄清楚如何在较小的屏幕上(移动设备，平板电脑)查看时删除上边距

我正在使用引导程序并具有布局。我有4列的行，每个div的内容都有不同的顶部边距。这样可以产生级联效果，并且在桌面上看起来不错。问题在于，在较小的屏幕上观看时，留有余量，并且在内容之间留有很大的空白。我希望div彼此之间留一个小的（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>

最佳答案

您只需要向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;

关于html - 我试图弄清楚如何在较小的屏幕上(移动设备，平板电脑)查看时删除上边距，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/55173920/