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

Question

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

我知道响应式广告(广告感知等)，但我仍然不明白这些概念如何正确应用于摩天大楼广告横幅。

这是我正在谈论的模拟:

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

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

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

Answer 1

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

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

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

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

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

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

Container Width - 120 - Padding.

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

我在 http://jsbin.com/suceji/3/ 有一个工作样本