Bootstrap-3 网格布局和固定大小的广告横幅

Question

在阅读 bootstrap 的新网格系统时，我问自己，广告横幅如何适应这样的网格系统？

我知道自适应广告（广告感等），但我仍然不明白这些概念如何正确地应用于摩天大楼广告横幅。

这是我正在谈论的模拟：

水平广告很好，但是 bootstrap 如何帮助我创建这样的布局？隐藏小型设备的摩天大楼没问题，使用网格助手，但我是对的，对于这种情况我仍然需要弄乱 float: left; 和 clearfix 吗？

即使摩天大楼能够响应并根据某些列宽自行调整大小，例如 col-md-2 等，它仍然需要某种 "row span" 才能跨越任意行。

编辑： 只是为了说清楚：我不是要求一个完整的标记，只是为了了解这样的概念在响应时间是否已经过时或者这仍然是 float: right 或 position: relative 等

的内容

Answer 1

Bootstrap 未设计为具有固定宽度的列。它是围绕百分比列宽设计的。

但是，您可以使用创建遵循 Bootstrap 使用它们的媒体查询。对于 "tablet" 大小的设备，Bootstrap 将整个容器设置为 768 像素的固定宽度，如下所示。

@media (min-width: 768px) {
    .container {
        width:750px
    }
}

您可以利用这些知识创建两个类，将布局分为两列。一个用于内容，一个用于广告。

@media (min-width: 768px) {
  .col-left-width{
    width: 625px;
  }
  .col-right-width{
    width: 120px;
  }
}

这使您可以将右列宽度固定为 120 像素。但是随着屏幕大小的变化，可以重新定义"left"列宽为

Container Width - 120 - Padding.

在这种情况下，左列将设置为 625px。

有一个工作样本

Bootstrap-3 grid layout and a fixed sized ad banner