使用Bootstrap重疊設計3

Question

嘿，我正在做Bootstrap Grid系統的第一步。

我想知道如何創建與電網系統以下設計爲大型顯示器：

我很困惑如何創建使用正確的語法和使用權的網格系統的重疊部分。

你有什麼建議如何開始？

在此先感謝

Answer 1

我已成立了一個Fiddle here，方便您瞭解如何開始這一點。

在此代碼中，它使用幾個col-XX-XX類來幫助顯示這些div如何改變它們的位置和寬度。只是想給你一個想法。抓住窗戶，嘗試調整大小，看看它是如何工作的。

我給了2藍色和1綠色一些抵消使用col-lg-offset-6向右。
在小屏幕尺寸上，我將2藍色和1綠色的寬度改爲等寬。你現在可以讓這些div做你想要的東西。

希望這會讓你開始。

<div class="container col-lg-12"> 
     <div class="row col-xs-4 col-xs-offset-1 col-sm-2 col-sm-offset-1 col-md-2 col-md-offset-1 col-lg-2 col-lg-offset-2 block-white"> 
     </div> 
    </div><!-- /.container --> 


    <div class="container col-lg-12">  
     <div class="col-xs-8 col-xs-offset-2 col-sm-5 col-sm-offset-6 col-md-5 col-md-offset-6 col-lg-6 col-lg-offset-6 block-blue"> 
     </div> 
     <div class="col-xs-8 col-xs-offset-2 col-sm-4 col-sm-offset-6 col-md-4 col-md-offset-6 col-lg-5 col-lg-offset-6 block-blue"> 
     </div> 
     <div class="col-xs-8 col-xs-offset-2 col-sm-3 col-sm-offset-6 col-md-3 col-md-offset-6 col-lg-4 col-lg-offset-6 block-green"> 
     </div> 
    </div><!-- /.container -->