0

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

要求是

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

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

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

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

我如何同时满足 1 和 2？

4

1 回答 1

2

添加独特的class或id你想消失的盒子请..看看我的演示

希望这有帮助

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

更新

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;
    }
}

工作演示

于 2013-03-04T04:07:14.273 回答