不同的编号不同屏幕分辨率上的列数

【问题标题】：Different no. of columns on different screen resolutions不同的编号不同屏幕分辨率上的列数
【发布时间】：2013-03-04 13:50:27
【问题描述】：

我正在使用引导响应来创建网站。在页面中间，有一个 div，里面有很多框。

要求是

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

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

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

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

如何同时满足 1 和 2？

【问题讨论】：

标签： jquery css html twitter-bootstrap

【解决方案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

【讨论】：

您好，该框不会消失，如果每行显示两个框，它应该出现在第二行。
谢谢。你太棒了。不求助于js的答案