引導中的金字塔網格

Question

我使用Bootstrap3製作3列網格。這看起來是這樣的：

然而，看到只有兩個箱子和一個箱子的行。如果沒有3個滿箱，我想要試驗看看它會如何看起來居中。

我通過將display:flex; justify-content:center;添加到.row類來完成此操作，但它不是真正的引導方式。我想知道什麼是真正的引導方式。

這裏是我的代碼：

<div class="padd-80"> 
    <div class="row"> 
    <div class="col-lg-4 col-lg-offset-0 col-md-4 col-md-offset-0 col-sm-6 col-sm-offset-3 col-xs-12"> 
     .... 
    </div> 
    <div class="col-lg-4 col-lg-offset-0 col-md-4 col-md-offset-0 col-sm-6 col-sm-offset-3 col-xs-12"> 
     .... 
    </div> 
    <div class="col-lg-4 col-lg-offset-0 col-md-4 col-md-offset-0 col-sm-6 col-sm-offset-3 col-xs-12"> 
     .... 
    </div> 
    </div> 
</div> 
<div class="padd-80"> 
    <div class="row"> 
    <div class="col-lg-4 col-lg-offset-0 col-md-4 col-md-offset-0 col-sm-6 col-sm-offset-3 col-xs-12"> 
     .... 
    </div> 
    <div class="col-lg-4 col-lg-offset-0 col-md-4 col-md-offset-0 col-sm-6 col-sm-offset-3 col-xs-12"> 
     .... 
    </div> 
    </div> 
</div> 
<div class="padd-80"> 
    <div class="row"> 
    <div class="col-lg-4 col-lg-offset-0 col-md-4 col-md-offset-0 col-sm-6 col-sm-offset-3 col-xs-12"> 
     .... 
    </div> 
    </div> 
</div> 

感謝

Answer 1

試試這個：

<div class="padd-80"> 
    <div class="row"> 
    <div class="col-lg-4 col-lg-offset-0 col-md-4 col-md-offset-0 col-sm-6 col-sm-offset-3 col-xs-12"> 
     .... 
    </div> 
    <div class="col-lg-4 col-lg-offset-0 col-md-4 col-md-offset-0 col-sm-6 col-sm-offset-3 col-xs-12"> 
     .... 
    </div> 
    <div class="col-lg-4 col-lg-offset-0 col-md-4 col-md-offset-0 col-sm-6 col-sm-offset-3 col-xs-12"> 
     .... 
    </div> 
    </div> 
</div> 
<div class="padd-80"> 
    <div class="row"> 
    <div class="col-lg-4 col-lg-offset-2 col-md-4 col-md-offset-2 col-sm-6 col-sm-offset-3 col-xs-12"> 
     .... 
    </div> 
    <div class="col-lg-4 col-lg-offset-0 col-md-4 col-md-offset-0 col-sm-6 col-sm-offset-3 col-xs-12"> 
     .... 
    </div> 
    </div> 
</div> 
<div class="padd-80"> 
    <div class="row"> 
    <div class="col-lg-4 col-lg-offset-4 col-md-4 col-md-offset-4 col-sm-6 col-sm-offset-3 col-xs-12"> 
     .... 
    </div> 
    </div> 
</div> 

的邏輯很簡單，引導電網系統包括12列。

如果你有兩個div，這是.COL-LG-4，你應該給COL-LG-偏移2至第一個div，使他們集中。

[2] [.COL-LG-4] [.COL-LG-4] [2]

對於第二行，我給COL-LG-偏移2和COL-MD -offset-2類到第一個div。

對於第三排，我給COL-LG-偏移4和COL-MD-偏移4類股利。

[4] [.col-lg-4] [4]