如何使用twitter bootstrap重疊列？

我想創建一個3列組合物：如何使用twitter bootstrap重疊列？

COL1（跨度3） - COL2（跨度8） - COL3（跨度3）

Col2中必須是col1和COL3在一列上的每個側重疊，他們必須在同一行。使用twitter bootstrap響應式網格創建此作品的最佳方法是什麼？

來源

2013-05-20 Tiago Rigoletto

你是什麼意思「重疊」？你不能再看到col2的兩側了嗎？ bs有12列的佈局，所以加起來爲14的跨度不會有幫助 – migg

是的，col1和3必須覆蓋col2。這就是要點，我需要14列以適應12格。我接近這個錯誤嗎？ –

你有三個選擇：

使用Twitter的引導v1.XX其中網格是16而不是12，那麼你可以做任何你與兩個將要離開一樣。

這裏的舊文檔與最新版本1.x（這是1.4.0）：http://bootstrapdocs.com/v1.4.0/docs/

對於V1.4引導文件，https://github.com/twitter/bootstrap/zipball/v1.4.0

自定義Bootstrap v2.XX版本

在這裏你定製的一切，使自定義生成：http://twitter.github.io/bootstrap/customize.html

Ps.:You可能需要重新做所有span*組織YOUT HTML文件，如果使用的自定義選項 - 也就是改變到14（或16 ）列，以及爲邊距/填充設置新值。

（謝謝@ jmeas指出定製，已經忘記了）。

既然你說，他們可能已經重疊，你可以使用默認的構建並使用以下。

我所做的就是讓offset*，並簡單的創建一個offset-*，具有負值。

HTML：

<div class="container"> 
    <div class="row-fluid"> 
     <div class="span3">xx</div> 
     <div class="span8 offset-1">yy</div> 
     <div class="span3 offset-1">zz</div> 
    </div> 
</div>

CSS：

.row-fluid .offset-1 { 
    margin-left: -10.638297872340425%; 
    *margin-left: -10.53191489361702%; 
} 
.row-fluid .offset-1:first-child { 
    margin-left: -8.51063829787234%; 
    *margin-left: -8.404255319148938%; 
}

See Fiddle 我加了一些RGBA顏色，所以你可以看到他們重疊，同時保持'12電網」。

來源

2013-05-20 17:20:35 RaphaelDDL

不一定正確; [Bootstrap可自定義]（http://twitter.github.io/bootstrap/customize.html），包括列數和寬度。有了這些說法，您創建一個負面抵消新班級是一個好主意，我怎麼會去做這件事。 – jmeas

@jmeas哦，真的，感謝您指點定製。忘了它有這個選項。將更新答案。 – RaphaelDDL

而且，還有一點：答案中的邊距僅適用於Bootstrap的默認配置; 12列網格。如果您打算通過配置頁面更改列，則需要對.less文件進行更改並編譯這些列（除非您想手動獲取偏移值，但我不建議這樣做） – jmeas

如何使用twitter bootstrap重疊列？

回答

相關問題