一个元素固定的响应式网格（相对于网格中的第一个元素）

【问题标题】：Responsive grid with one element being fixed (relative to the first element in the grid)一个元素固定的响应式网格（相对于网格中的第一个元素）
【发布时间】：2015-01-28 00:55:40
【问题描述】：

我有一个水平横幅，我想把它放在大方块的正下方（网格的左上角，见图1）。这意味着，在我拥有横幅之前，我将在网格中拥有 1（大）+6（常规）网格元素。

如果放大页面，或以较小的分辨率查看，我想将水平横幅保持在大方块的正下方，如图2所示。

而且，如果用户使用的分辨率只能适应大方块，而没有规则方块 - 那么我想将所有规则方块放在横幅之后，如图所示。3。

我怎样才能做到这一点？

我使用 Bootstrap 3 和 Angular。

非常感谢。

【问题讨论】：

你应该看看intention.js。它会根据用户视口自动“重新编码”您的 DOM

标签： javascript html css angularjs

【解决方案1】：

我最近遇到了像你这样的问题。

大盒子和小盒子需要用2个元素隔开（我用的是div）。

所以，你有div>big_box + div>small_box*6。这样，您可以轻松更改宽度。

使用此类：

col-lg- 代表宽度 >= 1200px
col-md- 代表宽度 >= 992px
col-sm-代表宽度>= 768px
col-xs-代表宽度

了解大小后，您需要了解 Bootstrap 将块分为 12 个部分。
因此，使用您的第一个示例，big_box 看起来是 4 或 5，small_box 看起来是 8 或 7。

所以它看起来像：

<div class="col-lg-4">
    <div class="big_box"></div>
</div>
<div class="col-lg-8">
    <div class="small_box"></div>
    ...
    <div class="small_box"></div>
</div>

至于盒子大小，或者你应该隐藏哪个块，最好使用media queries来选择

【讨论】：