Bootstrap-3網格佈局和一個固定大小的廣告橫幅

Question

在閱讀關於引導的新網格系統時，我問自己，廣告橫幅如何適應這樣的網格系統？

我知道自適應廣告（廣告意義等），但我仍不明白這些概念如何適用於摩天大樓廣告橫幅。

這裏是我談論的模擬：

具有水平的廣告是好的，但如何引導幫助我創造這樣的佈局？ 使用電網助手隱藏小型設備的摩天大樓是沒有問題的，但是我是否正確，我仍然需要爲float: left;和clearfix混淆這種情況？

即使摩天大樓會根據某些列寬調整自身的大小，例如col-md-2等，它仍然需要某種「行跨度」以跨越任意行。

編輯：只是要清楚：我不要求一個完整的標記全部打扮，只爲洞察這樣的概念是否在敏感時期過時的，或者這仍然是東西float: right或position: relative等。

Answer 1

Bootstrap的設計不是固定寬度的列。它是圍繞百分比列寬設計的。

但是，您可以使用Bootstrap使用它們後的創建媒體查詢。對於「平板電腦」尺寸的設備，Bootstrap將整個容器設置爲768px的固定寬度，如下所示。

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

您可以利用這些知識創建兩個類，將佈局分爲兩列。一個用於內容，一個用於廣告。

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

這使您可以固定右欄寬度爲120px。但由於屏幕的大小而變化，你可以重新定義「左」列寬

Container Width - 120 - Padding. 

在這種情況下，左邊的列將被設置爲625px。

我有一個工作示例在http://jsbin.com/suceji/3/