Question

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

这是我的html页面

padding-top

我的css：

<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的其余部分来自bootstrap。

有人有解决方案吗？

Answer 1

只需为此

添加以下CSS

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

Answer 2

希望这会有所帮助......下面是工作片段：

.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;
}

@media (max-width:768px){
.box { margin-bottom:15px; display:block;}
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<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="https://dummyimage.com/600x400/000/fff" 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="https://dummyimage.com/600x400/000/fff" class="img-card-content center-block img-responsive" style="width: 200px"/>
                </a>
            </div>
        </div>
    </div>
</div>

Answer 3

@superuser是正确的，但他拼错了

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

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

3 个答案: