Question

我正在使用bootstrap响应来创建一个网站。在页面的中间，有一个包含许多框的div。

要求是

在大屏幕上我应该每行放3个盒子，在中大屏幕上我应该每行放2个盒子，在小屏幕上我应该每行放1盒。
应始终最大化框宽（所有框的宽度相同）以填充div的整个宽度。

问题是我可以满足每个要求，但不能同时满足这两个要求。

为了只满足1，我可以为每个盒子指定固定宽度，让它们向左浮动，但是盒子不会调整大小。

为了只满足2，我可以在盒子上使用bootstrap span类（在父div上使用row-fluid），并且盒子将始终根据分辨率调整大小，但不是。每行的盒子总是一样的。

我如何同时遇到1和2？

Answer 1

将唯一的class或id添加到您要删除的框中..请查看我的Demo

希望这个帮助

注意： 查看效果滚动小提琴以扩展屏幕宽度

<强>更新

HTML

<div class="wrapper">
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
    <div class="box3"></div>
</div>

CSS

.wrapper {
    width:100%;
    float:left;
}
.wrapper div {
    float:left;
    width:22%;
    border:1px solid red;
    height:100px;
    margin:0 2% 0 0;
}

@media screen and (max-width: 368px){ 

    .wrapper div {
        width:45%;
        margin:10px 2% 0 0;
    }
}

工作demo

不同的没有。在不同的屏幕分辨率上的列

1 个答案: