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

Question

在阅读关于新网格引导程序系统时，我问自己，广告横幅如何适应这种网格系统？

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

这是我所说的内容的模拟：

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

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

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

Answer 1

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

但是，您可以使用跟随Bootstrap使用它们的创建媒体查询。对于平板电脑＆＃34;大小的设备，Bootstrap将整个容器设置为固定宽度768px，如下所示。

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

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

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

这允许您具有120px的固定右列宽度。但随着屏幕尺寸的变化，您可以重新定义＆＃34; left＆＃34;列宽到

Container Width - 120 - Padding.

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

我在http://jsbin.com/suceji/3/

处有一份工作样本