引导中的金字塔网格

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]