html - 为较小的屏幕在 div 之间创建空间

Question

我一直在努力在小屏幕的 div 之间腾出空间。我尝试使用 padding-top，但它对我不起作用。

这是我的html页面

<div class="container">
    <div class="row">
        <div class="col-md-6 col-md-offset-3 col-xs-12">
            <div class="col-md-6 col-xs-12">
                <a href="" class="box">
                    <img src="" class="img-card-content center-block img-responsive" style="width: 200px"/>
                </a>
            </div>
            <div class="col-md-6 col-xs-12">
                <a href="" class="box">
                    <img src="" class="img-card-content center-block img-responsive" style="width: 200px"/>
                </a>
            </div>
        </div>
    </div>
</div>

对于我的 CSS:

.box {
    padding: 40px;
    display: block;
    border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    -o-border-radius: 10px;
    -ms-border-radius: 10px;
    border: 1px solid #575757;
}

其余的 css 来自 bootstrap。

有人对此有解决方案吗？

Answer 1

只需为此添加以下 CSS

@media only screen and (max-width:768px) {
    .box {
        margin-bottom: 10px; /* Or required space */
        display: block;
    }
}